Merge pull request #33 from thelia/feat/logo

feat/logo

components/Atoms/Logos/Logo.stories.js

@@ -0,0 +1,54 @@
+import Logo from './Logo.twig';
+
+export default {
+  title: 'Design System/Atoms/Logos'
+};
+
+export const logo = {
+render: (args) => Logo(args),
+parameters: {
+    layout: 'centered',
+    backgrounds: {
+        default: 'light',
+        values: [
+          {
+            name: 'light',
+            value: '#FFFFFF',
+          },
+          {
+            name: 'dark',
+            value: '#282828',
+          },
+        ],
+      },
+},
+args:  {
+    type: 'thelia',
+    theme: 'dark',
+    path: '/images/placeholder-logo.svg',
+    alt: 'Thelia Logo',
+  },
+  argTypes: {
+    type: {
+      options: ['placeholder', 'thelia'],
+      control: { type: 'radio' },
+      defaultValue: 'placeholder',
+    },
+    theme: {
+      options: ['light', 'dark'],
+      control: { type: 'radio' },
+      defaultValue: 'light',
+      description: 'Select the theme for the Thelia Logotype',
+      if: { arg: 'type', eq: 'thelia' },
+    },
+    path: {
+      control: 'text',
+      description: 'Path to the logo image'
+    },
+    alt: {
+      control: 'text',
+      description: 'Alternative text for the logo image',
+      defaultValue: 'Placeholder Logo',
+    },
+  }
+  };

components/Atoms/Logos/Logo.twig

@@ -0,0 +1,11 @@
+<div class='w-56 h-7' role='img' aria-label='Placeholder Logo'>
+{% if type == 'placeholder' %}
+    <img class='w-full h-full' src="{{ path | default('/images/placeholder-logo.svg') }}" alt="{{ alt | default('Placeholder Logo')}}">
+{% elseif type == 'thelia' %}
+    {% if theme == 'dark' %}
+      <img class='w-full h-full' src='/images/thelia-black.svg' alt='Logo Thelia'>
+    {% else %}
+      <img class='w-full h-full' src='/images/thelia-white.svg' alt='Logo Thelia'>
+    {% endif %} 
+{% endif %}
+</div>