@myelmut/design-system 0.1.4 → 0.1.6

package/dist/types/index.d.ts

@@ -7,6 +7,7 @@ import { ReactComponent as CrossRoundedIcon } from './cross-rounded.svg';
 import { default as default_2 } from 'react';
 import { ReactComponent as FacebookIcon } from './Facebook.svg';
 import { ReactComponent as FiltersIcon } from './filters.svg';
+import { ForwardRefExoticComponent } from 'react';
 import { ReactComponent as HatCookIcon } from './hat-cook.svg';
 import { ReactComponent as HomeHeroShape } from './home-hero-shape.svg';
 import { ReactComponent as HomeHeroShapeMobile } from './home-hero-shape-mobile.svg';
@@ -19,13 +20,19 @@ import { ReactComponent as MagicWandIcon } from './magic-wand.svg';
 import { MemoExoticComponent } from 'react';
 import { ReactComponent as MenuIcon } from './menu.svg';
 import { ReactComponent as MinusIcon } from './minus.svg';
+import { ReactComponent as MuteIcon } from './mute.svg';
+import { ReactComponent as PauseIcon } from './pause.svg';
+import { ReactComponent as PlayIcon } from './play.svg';
 import { ReactComponent as PlusIcon } from './plus.svg';
 import { ReactComponent as PolaroidThreadIcon } from './polaroid-thread.svg';
 import { ReactComponent as ProfilIcon } from './profil.svg';
 import { ReactComponent as QuoteIcon } from './quote.svg';
+import { RefAttributes } from 'react';
+import { ReactComponent as StarIcon } from './star.svg';
 import { ReactComponent as SubtractIcon } from './subtract.svg';
 import { ReactComponent as TiktokIcon } from './Tiktok.svg';
 import { ReactComponent as TrustpilotIcon } from './trustpilot.svg';
+import { ReactComponent as UnmuteIcon } from './unmute.svg';
 
 export { ArrowIcon }
 
@@ -38,7 +45,7 @@ declare type BannerProps = {
     className?: string;
 };
 
-export declare const Button: MemoExoticComponent<({ as, variant, color, children, disabled, className, size, ...props }: ButtonProps) => JSX.Element>;
+export declare const Button: MemoExoticComponent<({ as, variant, color, active, children, disabled, className, size, ...props }: ButtonProps) => JSX.Element>;
 
 declare type ButtonAsButtonProps = CommonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     as?: 'button';
@@ -51,10 +58,10 @@ declare type ButtonAsLinkProps = CommonProps & React.AnchorHTMLAttributes<HTMLAn
 
 declare type ButtonProps = ButtonAsButtonProps | ButtonAsLinkProps;
 
-export declare const ButtonSelect: ({ label, id, options, value, onChange, required, hasError, error }: ButtonSelectProps) => JSX.Element;
+export declare const ButtonSelect: ({ label, id, options, value, onChange, required, hasError, error, className }: ButtonSelectProps) => JSX.Element;
 
 declare interface ButtonSelectProps {
-    label: string;
+    label?: string;
     options: {
         label: string;
         value: string;
@@ -65,6 +72,7 @@ declare interface ButtonSelectProps {
     hasError?: boolean;
     error?: string;
     id: string;
+    className?: string;
 }
 
 export { CalendarIcon }
@@ -103,6 +111,7 @@ declare type CommonProps = {
     children: React.ReactNode;
     disabled?: boolean;
     className?: string;
+    active?: boolean;
 };
 
 declare type CommonProps_2 = {
@@ -122,7 +131,7 @@ export { CrossIcon }
 
 export { CrossRoundedIcon }
 
-export declare const Dropdown: ({ label, id, options, placeholder, name, className, error, hasError, disabled, onChange, value, required }: DropdownProps) => JSX.Element;
+export declare const Dropdown: ({ label, id, options, placeholder, name, className, error, hasError, disabled, onChange, value, required, searchable }: DropdownProps) => JSX.Element;
 
 export declare const DropdownMenu: ({ name, options, value, values, disabled, className, onChange, onChangeMultiple, isOpen, multiple }: DropdownMenuProps) => JSX.Element;
 
@@ -146,6 +155,7 @@ declare interface DropdownProps {
     required?: boolean;
     hasError?: boolean;
     error?: string;
+    searchable?: boolean;
 }
 
 export declare const Emblem: ({ variant, className }: EmblemProps) => JSX.Element;
@@ -220,6 +230,10 @@ export declare const FooterTips: ({ className }: {
 }) => JSX.Element;
 
 export declare const frDesign: {
+    "homeVoucher": "PROMO : -{{percentage}}% SUR VOTRE PREMIÈRE COMMANDE + LIVRAISON OFFERTE",
+    "dropdown": {
+        "noResults": "Aucun résultat trouvé"
+    },
     "navigation": {
         "home": "Accueil",
         "recipes": "Recettes",
@@ -245,7 +259,7 @@ export declare const frDesign: {
         "copyright": "Tous droits réservés · Elmut"
     },
     "newsletter": {
-        "emailPlaceholder": "Email",
+        "emailPlaceholder": "claudinethequeen@gmail.com",
         "subscribeLabel": "S'abonner"
     },
     "wizard": {
@@ -258,17 +272,17 @@ export declare const frDesign: {
     }
 };
 
-export declare const H1: (props: Omit<TitleProps, "variant">) => JSX.Element;
+export declare const H1: default_2.ForwardRefExoticComponent<Omit<TitleProps, "variant"> & default_2.RefAttributes<HTMLHeadingElement>>;
 
-export declare const H2: (props: Omit<TitleProps, "variant">) => JSX.Element;
+export declare const H2: default_2.ForwardRefExoticComponent<Omit<TitleProps, "variant"> & default_2.RefAttributes<HTMLHeadingElement>>;
 
-export declare const H3: (props: Omit<TitleProps, "variant">) => JSX.Element;
+export declare const H3: default_2.ForwardRefExoticComponent<Omit<TitleProps, "variant"> & default_2.RefAttributes<HTMLHeadingElement>>;
 
-export declare const H4: (props: Omit<TitleProps, "variant">) => JSX.Element;
+export declare const H4: default_2.ForwardRefExoticComponent<Omit<TitleProps, "variant"> & default_2.RefAttributes<HTMLHeadingElement>>;
 
-export declare const H5: (props: Omit<TitleProps, "variant">) => JSX.Element;
+export declare const H5: default_2.ForwardRefExoticComponent<Omit<TitleProps, "variant"> & default_2.RefAttributes<HTMLHeadingElement>>;
 
-export declare const H6: (props: Omit<TitleProps, "variant">) => JSX.Element;
+export declare const H6: default_2.ForwardRefExoticComponent<Omit<TitleProps, "variant"> & default_2.RefAttributes<HTMLHeadingElement>>;
 
 export { HatCookIcon }
 
@@ -278,7 +292,7 @@ export { HomeHeroShapeMobile }
 
 export { HomeHeroShapeSmall }
 
-export declare const IllustratedCard: ({ variant, title, description, illustration, className, illustrationClassName }: IllustratedCardProps) => JSX.Element;
+export declare const IllustratedCard: ForwardRefExoticComponent<IllustratedCardProps & RefAttributes<HTMLDivElement>>;
 
 export declare const IllustratedCardButton: ({ label, layout, description, illustration, disabled, className, ...props }: IllustratedCardButtonProps) => JSX.Element;
 
@@ -297,6 +311,7 @@ declare interface IllustratedCardProps {
     illustration: string;
     className?: string;
     illustrationClassName?: string;
+    value?: string;
 }
 
 export { InfoIcon }
@@ -334,18 +349,19 @@ export { MagicWandIcon }
 
 export { MenuIcon }
 
-export declare const menuNavLinks: () => {
+export declare const menuNavLinks: {
     label: string;
     href: string;
 }[];
 
 export { MinusIcon }
 
-export declare const MobileMenu: ({ variant, className }: MobileMenuProps) => JSX.Element;
+export declare const MobileMenu: ({ variant, className, activeNavLink }: MobileMenuProps) => JSX.Element;
 
 declare type MobileMenuProps = {
     variant: 'dark' | 'light';
     className?: string;
+    activeNavLink: string;
 };
 
 declare type MultipleDropdownMenuProps = CommonProps_2 & {
@@ -354,14 +370,18 @@ declare type MultipleDropdownMenuProps = CommonProps_2 & {
     onChangeMultiple: (values: string[]) => void;
 };
 
+export { MuteIcon }
+
 export declare const Navbar: (props: NavbarProps) => JSX.Element;
 
-export declare const NavbarDesktop: ({ variant, className }: NavbarProps) => JSX.Element;
+export declare const NavbarDesktop: ({ variant, className, voucher, activeNavLink }: NavbarProps) => JSX.Element;
 
-export declare const NavbarMobile: ({ variant, className }: NavbarProps) => JSX.Element;
+export declare const NavbarMobile: ({ variant, className, voucher, activeNavLink }: NavbarProps) => JSX.Element;
 
 declare type NavbarProps = {
     variant: 'light' | 'dark';
+    activeNavLink: string;
+    voucher?: string;
     connected?: boolean;
     className?: string;
 };
@@ -379,7 +399,9 @@ declare interface NewsletterProps {
     error?: string;
 }
 
-export declare const ParagraphTitle: (props: Omit<TitleProps, "variant">) => JSX.Element;
+export declare const ParagraphTitle: default_2.ForwardRefExoticComponent<Omit<TitleProps, "variant"> & default_2.RefAttributes<HTMLParagraphElement>>;
+
+export { PauseIcon }
 
 export declare const PaymentCard: ({ content, className }: PaymentCardProps) => JSX.Element;
 
@@ -388,6 +410,8 @@ declare interface PaymentCardProps {
     className?: string;
 }
 
+export { PlayIcon }
+
 export { PlusIcon }
 
 export declare const Polaroid: ({ size, overflow, variant, title, mobileImage, desktopImage, mobileImage2x, desktopImage2x, showThread, className, imageClassName }: PolaroidProps) => JSX.Element;
@@ -442,7 +466,7 @@ declare interface RecetteCardProps {
     href: string;
 }
 
-export declare const ResponsiveImage: ({ mobile, desktop, mobile2x, desktop2x, type, loading, decoding, alt, className }: ResponsiveImageProps) => JSX.Element;
+export declare const ResponsiveImage: default_2.ForwardRefExoticComponent<ResponsiveImageProps & default_2.RefAttributes<HTMLImageElement>>;
 
 declare interface ResponsiveImageProps {
     alt: string;
@@ -454,6 +478,7 @@ declare interface ResponsiveImageProps {
     type?: 'image/webp' | 'image/jpeg' | 'image/png' | 'image/svg+xml';
     loading?: 'lazy' | 'eager';
     decoding?: 'async' | 'auto' | 'sync';
+    fadeOnLoad?: boolean;
 }
 
 export declare const SimpleIllustratedCardButton: ({ label, layout, illustration, disabled, className, illustrationClassName, ...props }: SimpleIllustratedCardButtonProps) => JSX.Element;
@@ -480,7 +505,9 @@ declare type SocialButtonProps = {
     className?: string;
 };
 
-export declare const SpanTitle: (props: Omit<TitleProps, "variant">) => JSX.Element;
+export declare const SpanTitle: default_2.ForwardRefExoticComponent<Omit<TitleProps, "variant"> & default_2.RefAttributes<HTMLSpanElement>>;
+
+export { StarIcon }
 
 export declare const StatCard: ({ variant, size, value, metric, description, className }: StatCardProps) => JSX.Element;
 
@@ -542,6 +569,18 @@ declare interface TestimonialProps {
     className?: string;
 }
 
+export declare const TestimonialSliderCard: ForwardRefExoticComponent<TestimonialSliderCardProps & RefAttributes<HTMLQuoteElement>>;
+
+declare interface TestimonialSliderCardProps {
+    variant?: 'dark' | 'light';
+    quote: string;
+    author: string;
+    role: string;
+    image: string;
+    score: number;
+    className?: string;
+}
+
 declare const Text_2: ({ variant, size, children, className, ...props }: TextProps) => JSX.Element | undefined;
 export { Text_2 as Text }
 
@@ -576,7 +615,7 @@ declare interface TipsProps {
     className?: string;
 }
 
-export declare const Title: ({ variant, size, italic, children, className }: TitleProps) => JSX.Element;
+export declare const Title: default_2.ForwardRefExoticComponent<TitleProps & default_2.RefAttributes<HTMLElement>>;
 
 declare type TitleProps = {
     variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
@@ -614,6 +653,8 @@ declare interface TransitionCardProps {
 
 export { TrustpilotIcon }
 
+export { UnmuteIcon }
+
 export declare const UpCard: ({ title1, description1, title2, description2, step, illustration, className, illustrationClassName, align }: UpCardProps) => JSX.Element;
 
 declare interface UpCardProps {
@@ -628,7 +669,20 @@ declare interface UpCardProps {
     illustrationClassName?: string;
 }
 
-export declare const WizardDropdown: ({ placeholder, options, value, onChange, name, disabled, className }: WizardDropdownProps) => JSX.Element;
+export declare const VideoPlayer: ({ videoId, alt, className, placeholderImageMobile, hasSound, placeholderImageDesktop, placeholderImageMobile2x, placeholderImageDesktop2x }: VideoPlayerProps) => JSX.Element;
+
+declare interface VideoPlayerProps {
+    videoId: string;
+    alt: string;
+    className?: string;
+    placeholderImageMobile: string;
+    placeholderImageDesktop: string;
+    placeholderImageMobile2x: string;
+    placeholderImageDesktop2x: string;
+    hasSound?: boolean;
+}
+
+export declare const WizardDropdown: ({ placeholder, options, value, onChange, name, disabled, className, searchable }: WizardDropdownProps) => JSX.Element;
 
 declare interface WizardDropdownProps {
     placeholder?: string;
@@ -641,6 +695,7 @@ declare interface WizardDropdownProps {
     onChange: (value: string) => void;
     disabled?: boolean;
     className?: string;
+    searchable?: boolean;
 }
 
 export declare const WizardNavbar: ({ variant, totalSteps, currentStep, className }: WizardNavbarProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myelmut/design-system",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Design system for Elmut project",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "main": "dist/index.cjs.js",
+  "main": "dist/index.cjs",
   "module": "dist/index.es.js",
   "types": "dist/types/index.d.ts",
   "style": "dist/index.css",
@@ -72,6 +72,7 @@
     "build": "vite build && pnpm run copy-static-assets",
     "copy-static-assets": "cp -r src/styles styles && cp -r src/assets assets",
     "build:with-assets": "vite build && pnpm run copy-assets",
+    "design-system:copy-assets": "mkdir -p public/design-system/ && cp -r src/assets/* public/design-system/",
     "copy-assets": "mkdir -p dist/public/assets && cp -r src/assets/* dist/public/assets/ && cp -r dist/public/assets/* ../public/design-system/",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",

package/styles/globals.css

@@ -110,14 +110,11 @@
     --container-lg: 1024px;
     --container-xl: 1280px;
     --container-2xl: 1536px;
-}
 
-@layer base {
-    html {
-        font-family: var(--font-mori);
-        color: var(--color-claret-violet-dark);
-        background-color: var(--color-beige-light);
-    }
+    /* animation */
+    --animate-fade-in: fade-in 300ms ease-in;
+    --animate-fade-out: fade-out 300ms ease-out;
+    --animate-banner: banner 15s linear infinite;
 }
 
 @layer utilities {
@@ -131,6 +128,14 @@
         @apply [appearance:textfield]; /* standard + Firefox */
     }
 
+    summary {
+        list-style: none;
+    }
+
+    summary::-webkit-details-marker {
+        display: none;
+    }
+
     @keyframes fade-in {
         from {
             opacity: 0;
@@ -149,12 +154,13 @@
         }
     }
 
-    .animate-fade-in {
-        animation: fade-in 300ms ease-in;
-    }
-
-    .animate-fade-out {
-        animation: fade-out 150ms ease-out;
+    @keyframes banner {
+        from {
+            transform: translateX(0);
+        }
+        to {
+            transform: translateX(-50%);
+        }
     }
 }