oddsgate-ds 1.0.15 → 1.0.17

package/dist/esm/types/components/atoms/Button/Button.stories.d.ts

@@ -4,4 +4,5 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
 export default _default;
 export declare const Primary: StoryObj<IButton>;
 export declare const Secondary: StoryObj<IButton>;
+export declare const Link: StoryObj<IButton>;
 export declare const Disabled: StoryObj<IButton>;

package/dist/esm/types/components/atoms/SocialLinks/SocialLinks.stories.d.ts

@@ -2,5 +2,6 @@ import type { StoryObj } from '@storybook/react';
 import { ISocialLinks } from './SocialLinks.interface';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
 export default _default;
+export declare const Example: StoryObj<ISocialLinks>;
 export declare const Light: StoryObj<ISocialLinks>;
 export declare const Dark: StoryObj<ISocialLinks>;

package/dist/esm/types/index.d.ts

@@ -19,6 +19,7 @@ export { default as Loader } from './components/atoms/Loader';
 export { default as EmptyState } from './components/atoms/EmptyState';
 export { default as CloseButton } from './components/atoms/CloseButton';
 export { default as ScrollingNav } from './components/atoms/ScrollingNav';
+export { default as SocialLinks } from './components/atoms/SocialLinks';
 export { default as Marquee } from './components/atoms/Marquee';
 export { default as PortalComponent } from './components/common/PortalComponent';
 export { Accordion as Accordion } from './components/molecules/Accordion';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/atoms/Button/Button.stories.tsx

@@ -50,6 +50,12 @@ export const Secondary: StoryObj<IButton> = {
     variant: 'secondary'
   }
 }
+export const Link: StoryObj<IButton> = {
+  args: {
+    ...Primary.args,
+    variant: 'link'
+  }
+}
 export const Disabled: StoryObj<IButton> = {
   args: {
     ...Primary.args,

package/src/components/atoms/Button/Button.theme.ts

@@ -9,10 +9,10 @@ export const StyledButton = styled.a<IButtonSC>`
   vertical-align: middle;
   justify-content: center;
   align-items: center;
+  gap: ${spaces[2]};
   border: 0;
   outline: 0;
   background-color: transparent;
-  font-weight: 300;
 
   margin-right: ${spaces[3]};
 
@@ -25,77 +25,80 @@ export const StyledButton = styled.a<IButtonSC>`
     margin-right: 0;
   }
 
-  &>span,
-  &>i {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
   &>i {
     color: currentColor;
     transition: all 0.3s ease;
   }
 
-  & *~span,
-  & span~* {
-    margin-left: ${spaces[2]};
-  }
-
   ${(props) => {
     switch (props.$variant) {
       case "primary": default:
         return css`
-            ${fontSize('h6')};
-
-            & i{
-              width: 3rem;
-              height: 3rem;
-              line-height: 3rem;
-              font-size: 2.6rem;
-
-              color: currentColor;
-              border: 1px solid currentColor;
-              border-radius: 50px;
-
-              transition: all 0.3s linear;
-              transform: rotateZ(-45deg);
-              transform-origin: center center;
-              text-align: center;
-
-              &::before{
-                line-height: inherit;
+            ${fontSize('h4')};
+            padding: 28px 36px;
+            border-radius: 50px;
+            text-transform:uppercase;
+
+            ${props.$mode === "light" ? `
+              color: ${colors.primary50};
+              background-color: ${colors.secondary50};
+
+              &:hover{
+                color: ${colors.secondary50};
+                background-color: ${colors.primary50};
               }
-            }
+              ` : `
+              color: ${colors.secondary50};
+              background-color: ${colors.primary50};
 
-            &:hover {
-              & i{
-                transform: rotateZ(0);
+              &:hover{
+                color: ${colors.primary50};
+                background-color: ${colors.secondary50};
               }
-            }
-
-            ${props.$mode === "dark" ? `
-              color: ${colors.deepblue};
-              ` : `
-              color: ${colors.white};
             `}
           `;
       case "secondary":
         return css`
-          ${fontSize('h6')};
-
-          & span{
-            text-decoration: underline;
-          }
+          ${fontSize('h5')};
+          padding: 18px 26px;
+          border-radius: 50px;
+          text-transform:uppercase;
+
+          ${props.$mode === "light" ? `
+            color: ${colors.primary50};
+            background-color: ${colors.secondary50};
+
+            &:hover{
+              color: ${colors.secondary50};
+              background-color: ${colors.primary50};
+            }
+            ` : `
+            color: ${colors.secondary50};
+            background-color: ${colors.primary50};
 
-          &:hover{
-            opacity: 0.6;
-          }
+            &:hover{
+              color: ${colors.primary50};
+              background-color: ${colors.secondary50};
+            }
+          `}
+        `;
+      case "link":
+        return css`
+          ${fontSize('h5')};
+          text-transform:uppercase;
 
+          ${props.$mode === "light" ? `
+            color: ${colors.third50};
 
-          ${props.$mode === "dark" ? `
-            color: ${colors.deepblue};
+            &:hover{
+              color: ${colors.secondary50};
+            }
             ` : `
-            color: ${colors.white};
+            color: ${colors.secondary50};
+
+            &:hover{
+              color: ${colors.third50};
+            }
           `}
         `;
     }

package/src/components/atoms/FormField/FormField.component.tsx

@@ -20,7 +20,7 @@ export const FormField = ({
       {label && (
         <label
           htmlFor={itemID}
-          className="d-blocks captions text-uppercase mb-2"
+          className="d-blocks h4 color-secondary90 text-uppercase mb-2"
         >
           {label}
         </label>

package/src/components/atoms/FormField/FormField.theme.tsx

@@ -60,13 +60,15 @@ export const StyledFieldContainer = styled.div<IFormField>`
       textarea,
       select {
         font-family: inherit;
-        ${fontSize('texts')};
+        ${fontSize('h4')};
+        font-weight: 700;
+        text-transform:uppercase;
 
-        border-radius: 8px;
+        border-radius: 50px;
         border: 0;
 
         padding: 12px;
-        background: transparent;
+        background: ${colors.secondary50};
         outline: none;
         width: 100%;
 
@@ -77,6 +79,11 @@ export const StyledFieldContainer = styled.div<IFormField>`
         }
       }
 
+      textarea{
+        border-radius: 46px;
+        height: 11.5rem;
+      }
+
       select{
         option{
           color: ${colors.primary70};

package/src/components/atoms/SocialLinks/SocialLinks.component.tsx

@@ -14,9 +14,11 @@ const SocialLinks = ({
 
   return (
     <StyledSocialLinks variant={variant} className={className} style={style}>
-      {Object.keys(socials).map((social: string) => {
+      {Object.keys(socials).map((social: string, index:number) => {
+        if (!social) return <></>
+
         return (
-          <li>
+          <li key={`social-${index}`}>
             <a
               href={socials[social]}
               target="_blank"

package/src/components/atoms/SocialLinks/SocialLinks.stories.tsx

@@ -12,6 +12,20 @@ export default {
   argTypes: {}
 } as Meta
 
+
+export const Example: StoryObj<ISocialLinks> = {
+  args: {
+    variant: 'light',
+    socials: {
+      facebook: 'https://www.facebook.com/wearemiew',
+      instagram: 'https://www.instagram.com/wearemiew/',
+      youtube: 'https://www.youtube.com/user/miewshapes',
+      linkedIn: 'https://www.linkedin.com/company/2470068/admin/'
+    }
+  }
+}
+
+
 export const Light: StoryObj<ISocialLinks> = {
   render: args => <SocialLinks {...args} />,
   args: {

package/src/components/atoms/SocialLinks/SocialLinks.theme.ts

@@ -36,15 +36,15 @@ export const StyledSocialLinks = styled.ul<ISocialLinks>`
       case "light": default:
         return css`
           & li a{
-            color: ${colors.white};
-            background-color: ${colors.primary70};
+            color: ${colors.secondary50};
+            background-color: ${colors.primary50};
           }
         `;
       case "dark":
         return css`
           & li a{
-            color: ${colors.primary70};
-            background-color: ${colors.white};
+            color: ${colors.primary50};
+            background-color: ${colors.secondary50};
           }
         `;
     }

package/src/index.ts

@@ -21,6 +21,7 @@ export { default as Loader } from './components/atoms/Loader'
 export { default as EmptyState } from './components/atoms/EmptyState'
 export { default as CloseButton } from './components/atoms/CloseButton'
 export { default as ScrollingNav } from './components/atoms/ScrollingNav'
+export { default as SocialLinks } from './components/atoms/SocialLinks'
 export { default as Marquee } from './components/atoms/Marquee'
 
 //common

package/src/styles/variables.ts

@@ -31,19 +31,18 @@ export const colors = <Record<string, string>>{
   transparent: "transparent",
 
   // Gray
-  gray10: '#F5F3F1',
-  gray20: '#C0BFBE',
-  gray50: '#A0A0A0',
-  gray70: '#6E6D6C',
-  gray90: '#3C3B39',
+  gray10: '#FDFDF1',
+  gray20: '#FFFECC',
+  gray50: '#FFFECC',
+  gray70: '#82816C',
+  gray90: '#82816C',
 
-  primary10: '#FC647C',
   primary50: '#FC3151',
-  primary90: '#FC3151',
-  
+
   secondary10: '#FDFDF1',
   secondary50: '#FFFECC',
-  
+  secondary90: '#82816C',
+
   third10: '#440D3F',
   third50: '#2C0929',