Feat(web): Introduce UNSTABLE_PartnerLogo component #DS-1356

lmc-eu · Jun 28, 2024 · f6eb6fb · f6eb6fb
1 parent 36f68bf
commit f6eb6fb
Show file tree

Hide file tree

Showing 6 changed files with 224 additions and 0 deletions.
diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/index.html b/packages/web-react/src/components/UNSTABLE_PartnerLogo/index.html
@@ -0,0 +1 @@
+{{> web-react/demo }}
diff --git a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_UNSTABLE_PartnerLogo.scss b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_UNSTABLE_PartnerLogo.scss
@@ -0,0 +1,13 @@
+@use 'theme' as theme;
+@use '../../tools/dictionaries';
+
+.UNSTABLE_PartnerLogo {
+    width: fit-content;
+    background: theme.$background-color;
+}
+
+.UNSTABLE_PartnerLogo > svg {
+    height: 100%;
+}
+
+@include dictionaries.generate-sizes('UNSTABLE_PartnerLogo', theme.$sizes);
diff --git a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_theme.scss b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_theme.scss
@@ -0,0 +1,20 @@
+@use '@tokens' as tokens;
+
+$background-color: tokens.$background-basic;
+$sizes: (
+    small: (
+        height: 44px,
+        padding-x: 6px,
+        padding-y: 6px,
+    ),
+    medium: (
+        height: tokens.$space-1100,
+        padding-x: tokens.$space-400,
+        padding-y: tokens.$space-400,
+    ),
+    large: (
+        height: 84px,
+        padding-x: tokens.$space-500,
+        padding-y: tokens.$space-500,
+    ),
+);
diff --git a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/index.html b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/index.html
diff --git a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/index.scss b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/index.scss
@@ -0,0 +1 @@
+@forward 'UNSTABLE_PartnerLogo';
diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss
@@ -28,5 +28,6 @@
 @forward 'UNSTABLE_Avatar';
 @forward 'UNSTABLE_Divider';
 @forward 'UNSTABLE_EmptyState';
+@forward 'UNSTABLE_PartnerLogo';
 @forward 'UNSTABLE_ProductLogo';
 @forward 'UNSTABLE_Slider';