@nuskin/foundation-ui-components 1.0.0-cft-35.7 → 1.0.0-cft-35.8

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# [1.0.0-cft-35.8](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/compare/v1.0.0-cft-35.7...v1.0.0-cft-35.8) (2023-04-10)
+
+
+### Fis
+
+* format code ([8587727](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/85877278980afed666a55eabd7ba8a86ba14f236))
+
+### Fix
+
+* button import name chnaged ([47522e3](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/47522e3f8c2e940ac720d204d69448a0b46442ce))
+* conflict ([971e4a5](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/971e4a50c88a545f2890a62349f2ebd06759384a))
+* merge issue ([67a72ce](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/67a72ce440c27b88a339e68f4c74a39c1c23b9a1))
+* Typography and banner ui updates ([99a8322](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/99a8322c968c9b31dca4bc1d0d3652d47a65338b))
+
+### FIX
+
+* build issue ([935b132](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/935b1322d47841eb554ad514cb9880b9e9f48e52))
+* typo fix ([32d5fa7](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/32d5fa7dc09ec60ce3698b6c638ea9351405ef28))
+
+### New
+
+* Nsbaner Ui #CFT-118 ([d1896fd](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/d1896fd00fc1c7cc22a0db931507ec6096e7fdef)), closes [#CFT-118](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/issues/CFT-118)
+
+### Update
+
+* Code format ([7244ea1](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/7244ea1fcef2bdb75dd45d7af04809e763cff8dd))
+
 # [1.0.0-cft-35.7](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/compare/v1.0.0-cft-35.6...v1.0.0-cft-35.7) (2023-04-10)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuskin/foundation-ui-components",
-  "version": "1.0.0-cft-35.7",
+  "version": "1.0.0-cft-35.8",
   "description": "It is a foundation library written in react, that provides commom components to all UI pages",
   "private": false,
   "main": "src/common/index.ts",

package/src/common/banner/NsBanner.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import NsBanner from './';
+
+describe('Hero component', () => {
+    it('renders banner image and title', () => {
+        const childText = 'Welcome to My Website';
+        const image = 'https://example.com/banner.jpg';
+        const { getByAltText, getByText } = render(
+            <NsBanner imageUrl={image} altText="Banner image">
+                <h1>{childText}</h1>
+            </NsBanner>
+        );
+        const childElement = getByText(childText);
+        const imageElement = getByAltText('Banner image');
+        expect(childElement).toBeInTheDocument();
+        expect(imageElement).toBeInTheDocument();
+    });
+});

package/src/common/banner/NsBanner.stories.tsx

@@ -0,0 +1,42 @@
+/**
+ * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
+ * NsBanner.stories.tsx
+ * @description NsBanner component.
+ */
+
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Banner from './';
+import Typography from '../typography';
+import Button from '../button/NsButton';
+
+export default {
+    title: 'Components',
+    component: Banner,
+    decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
+    argTypes: {
+        children: {
+            control: 'text', // use the text control to edit children prop
+        },
+    },
+    args: {
+        imageUrl: 'https://media.nuskin.com/m/e2f6d26058b2e7d/webimage-us-collagen-strawberry-hompage-banner.png',
+        altText: 'NsBanner',
+        alignment: 'center',
+        justify: 'start',
+        children: (
+            <div>
+                <Typography className="w-80" variant="h1" colorOverride="#000000">
+                    Limited time offers on LumiSpa iO cleansers and bundles!
+                </Typography>
+                <Typography variant="p-m" className="my-5" colorOverride="#000000">
+                    Learn more about what I do and how I can help you
+                </Typography>
+                <Button variant="contained">Contact me</Button>
+            </div>
+        ),
+    },
+} as ComponentMeta<typeof Banner>;
+
+export const NsBanner: ComponentStory<typeof Banner> = (args) => <Banner {...args} />;

package/src/common/banner/NsBanner.styled.tsx

@@ -0,0 +1,23 @@
+import { styled } from '@nuskin/foundation-theme';
+import { AlignmentType } from './types';
+
+export const StyledBanner = styled.section`
+    position: relative;
+    display: flex;
+    justify-content: space-evenly;
+    img {
+        width: 100%;
+        object-fit: cover;
+    }
+`;
+
+export const StyledHeroText = styled.div<{ $justify: AlignmentType; $alignment: AlignmentType }>`
+    height: 100%;
+    display: flex;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    justify-content: ${({ $justify }) => $justify};
+    align-items: ${({ $alignment }) => $alignment};
+    text-align: left;
+`;

package/src/common/banner/NsBanner.tsx

@@ -0,0 +1,33 @@
+/**
+ * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
+ * NsBanner.tsx
+ * @description NsBanner component with a image background
+ */
+
+import React, { PropsWithChildren } from 'react';
+
+import { NsBannerProps } from './types';
+import { StyledBanner, StyledHeroText } from './NsBanner.styled';
+
+const NsBanner = (props: PropsWithChildren<NsBannerProps>) => {
+    const {
+        children,
+        imageUrl = '',
+        altText = 'NsBanner',
+        alignment = 'center',
+        justify = 'start',
+        className = '',
+        additionalProps = {},
+    } = props;
+
+    return (
+        <StyledBanner className={className}>
+            <img src={imageUrl} alt={altText} id="bgImage" {...additionalProps} />
+            <StyledHeroText $alignment={alignment} $justify={justify}>
+                <div className="mx-14">{children}</div>
+            </StyledHeroText>
+        </StyledBanner>
+    );
+};
+
+export default NsBanner;

package/src/common/banner/index.ts

@@ -0,0 +1 @@
+export { default } from './NsBanner';

package/src/common/banner/types.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { AdditionalProps } from '../common.types';
+
+export type AlignmentType = 'start' | 'center' | 'end';
+
+export type NsBannerProps = {
+    children: React.ReactNode;
+    imageUrl: string;
+    altText?: string;
+    alignment?: AlignmentType;
+    justify?: AlignmentType;
+    className?: string;
+} & AdditionalProps;

package/src/common/index.ts

@@ -19,6 +19,9 @@ export * from './nav-tab';
 export { default as NsNavProductCard } from './nav-product-card';
 export * from './nav-product-card';
 
+export { default as NsBanner} from './banner';
+export * from './banner';
+
 export { default as Typography } from './typography';
 export * from './typography';
 

package/src/common/nav-tab/NsNavTab.tsx

@@ -20,14 +20,14 @@ export const NsNavTabComponent = (props: PropsWithChildren<NSNavTabComponentProp
                 <div onMouseLeave={handleLeave} data-testid="nav-container-draw" className="p-0 m-0">
                     <div className="pb-0.5">
                         <div className="flex">
-                            {tabs?.map((tab, i) => {
+                            {tabs?.map((tab) => {
                                 const handleMouseEnter = () => {
                                     setActive(tab.tabName);
                                 };
                                 return (
                                     <div
-                                        key={i}
-                                        data-testid={tab.tabName}
+                                        key={tab?.tabName}
+                                        data-testid={tab?.tabName}
                                         className="relative cursor-pointer"
                                         onMouseEnter={handleMouseEnter}
                                     >

package/src/common/typography/NsTypography.tsx

@@ -11,6 +11,7 @@ const NsTypography = ({
     decoration = 'none',
     color = 'primary',
     additionalProps = {},
+    colorOverride = '',
 }: PropsWithChildren<NsTypographyProps>) => {
     return (
         <StyledTypography
@@ -19,6 +20,7 @@ const NsTypography = ({
             weight={weight}
             variant={variant}
             decoration={decoration}
+            colorOverride={colorOverride}
             color={color}
             {...additionalProps}
         >

package/src/common/typography/Typography.styled.tsx

@@ -2,9 +2,7 @@ import { css } from '@emotion/react';
 import { styled, GlobalStyles, ColorUtils } from '@nuskin/foundation-theme';
 import { NsTypographyProps } from './types';
 
-const {
-    getPaletteColor,
-} = ColorUtils;
+const { getPaletteColor } = ColorUtils;
 
 const variantStyles = {
     h1: 'font-size: 36px; line-height: 44px;',
@@ -32,7 +30,8 @@ const fontWeightMap = {
 
 export const StyledTypography = styled.div<NsTypographyProps>`
     font-family: Inter;
-    color: ${({ color, theme }) => getPaletteColor(theme, color)};
+    color: ${({ color, theme, colorOverride }) =>
+        colorOverride?.startsWith('#') ? colorOverride : getPaletteColor(theme, color)};
     font-weight: ${({ weight = 'normal' }) => fontWeightMap[weight]};
     font-style: ${({ fontStyle }) => fontStyle};
     ${({ variant = 'h1' }) => variantStyles[variant]};

package/src/common/typography/types.d.ts

@@ -26,4 +26,5 @@ export type NsTypographyProps = {
     color?: FoundationTheme.PaletteColors;
     component?: 'div' | 'span' | 'p';
     className?: string;
+    colorOverride?: string;
 } & AdditionalProps;