Merge branch 'develop' into feat/new-icons

components/Molecules/SocialMedia/SocialMedia.stories.js

@@ -0,0 +1,54 @@
+import SocialMedia from './SocialMedia.twig';
+import SocialMedias from './SocialMedias.twig';
+
+export default {
+  title: 'Design System/Molecules/SocialMedia'
+};
+
+export const list = {
+  render: (args) => SocialMedias(args),
+  args: { size: 'w-8 h-8' },
+  argTypes: {
+    size: {
+      control: {
+        type: 'select'
+      },
+      options: ['w-8 h-8', 'w-10 h-10', 'w-14 h-14', 'w-20 h-20']
+    }
+  }
+};
+
+export const base = {
+  render: (args) => SocialMedia(args),
+  args: {
+    size: 'w-8 h-8',
+    variant: 'black',
+    icon: 'facebook',
+    href: '#'
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: 'select'
+      },
+      options: ['w-8 h-8', 'w-10 h-10', 'w-14 h-14', 'w-20 h-20']
+    },
+    variant: {
+      control: {
+        type: 'select'
+      },
+      options: ['black', 'white']
+    },
+    icon: {
+      control: {
+        type: 'select'
+      },
+      options: ['github', 'x', 'facebook']
+    },
+    href: {
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};

components/Molecules/SocialMedia/SocialMedia.twig

@@ -0,0 +1,5 @@
+<a href="{{ href }}" class='SocialMedia SocialMedia--{{variant}} {{size}}'>
+  <div class='SocialMedia-icon'>
+    {{ source("/icons/" ~ icon  ~".svg") }}
+  </div>
+</a>

components/Molecules/SocialMedia/SocialMedias.twig

@@ -0,0 +1,15 @@
+<div class="flex">
+  <div class="bg-white p-4 flex flex-col items-center gap-8">
+    <h1 class="h1">Black</h1>
+    {% include './SocialMedia.twig' with { size: size, variant: "black", icon: "github", href: "#" } %}
+    {% include './SocialMedia.twig' with { size: size, variant: "black", icon: "facebook", href: "#" } %}
+    {% include './SocialMedia.twig' with { size: size, variant: "black", icon: "x", href: "#" } %}
+  </div>
+
+  <div class="bg-black p-4 flex flex-col gap-8 items-center">
+    <h1 class="h1 text-white">White</h1>
+    {% include './SocialMedia.twig' with { size: size, variant: "white", icon: "github", href: "#" } %}
+    {% include './SocialMedia.twig' with { size: size, variant: "white", icon: "facebook", href: "#" } %}
+    {% include './SocialMedia.twig' with { size: size, variant: "white", icon: "x", href: "#" } %}
+  </div>
+</div>

components/Molecules/SocialMedia/socialMedia.css

@@ -0,0 +1,29 @@
+.SocialMedia {
+  display: block;
+
+  &--black {
+    color: var(--black);
+
+    &:hover {
+      color: var(--grey-dark);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--vermillon-medium);
+      border-radius: 8px;
+    }
+  }
+
+  &--white {
+    color: var(--white);
+
+    &:hover {
+      color: var(--vermillon-medium);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--vermillon-medium);
+      border-radius: 8px;
+    }
+  }
+}