oddsgate-ds 1.0.16 → 1.0.17

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/package.json

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

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

@@ -61,6 +61,7 @@ export const StyledFieldContainer = styled.div<IFormField>`
       select {
         font-family: inherit;
         ${fontSize('h4')};
+        font-weight: 700;
         text-transform:uppercase;
 
         border-radius: 50px;
@@ -78,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: {