Merge pull request #1103 from glints-dev/feature/otp-2012

Add variant prop in Brand to support different styles.

Author: Yayo-Arellano

src/General/Brand/Brand.stories.tsx

@@ -27,6 +27,12 @@ export default {
         ],
       },
     },
+    variant: {
+      control: {
+        type: 'radio',
+        options: ['horizontal', 'square'],
+      },
+    },
     className: {
       control: {
         disable: true,
@@ -45,11 +51,12 @@ const Template: Story<BrandProps> = args => <Brand {...args} />;
 
 export const Interactive = Template.bind({});
 Interactive.args = {
-  asset: 'glints-black',
+  asset: 'glints',
 };
 
 export const RedirectToGlintsWhenRightClick = Template.bind({});
 RedirectToGlintsWhenRightClick.args = {
   asset: 'glints-black',
+  variant: 'square',
   rightClickURL: 'https://glints.com',
 };

src/General/Brand/Brand.test.tsx

@@ -8,21 +8,23 @@ import Brand from './Brand';
 describe('<Brand/>', () => {
   it('should render as expected', () => {
     const blackLogoSnapshot = renderer
-      .create(<Brand asset="glints-black" />)
+      .create(<Brand asset="glints-black" variant="square" />)
       .toJSON();
     expect(blackLogoSnapshot).toMatchSnapshot();
-    const white = renderer.create(<Brand asset="glints-white" />).toJSON();
+    const white = renderer
+      .create(<Brand asset="glints-white" variant="square" />)
+      .toJSON();
     expect(white).toMatchSnapshot();
     const blackTapLoker = renderer
-      .create(<Brand asset="glints-taploker-black" />)
+      .create(<Brand asset="glints-taploker-black" variant="square" />)
       .toJSON();
     expect(blackTapLoker).toMatchSnapshot();
     const whiteTapLoker = renderer
-      .create(<Brand asset="glints-taploker-white" />)
+      .create(<Brand asset="glints-taploker-white" variant="square" />)
       .toJSON();
     expect(whiteTapLoker).toMatchSnapshot();
     const cutsom = renderer
-      .create(<Brand asset="http://example.com/example.jpg" />)
+      .create(<Brand asset="http://example.com/example.jpg" variant="square" />)
       .toJSON();
     expect(cutsom).toMatchSnapshot();
   });
@@ -33,7 +35,7 @@ describe('<Brand/>', () => {
 
     const url = 'https://glints.com';
     const { getByRole } = render(
-      <Brand asset="glints-black" rightClickURL={url} />
+      <Brand asset="glints-black" rightClickURL={url} variant="square" />
     );
     const container = getByRole('presentation');
     fireEvent.contextMenu(container);
@@ -51,11 +53,35 @@ describe('<Brand/>', () => {
         asset="glints-black"
         rightClickURL={url}
         onContextMenu={onContextMenu}
+        variant="square"
       />
     );
     const container = getByRole('presentation');
     expect(onContextMenu).toHaveBeenCalledTimes(0);
     fireEvent.contextMenu(container);
     expect(onContextMenu).toHaveBeenCalledTimes(1);
   });
+  it('should render with correct styles based on variant', () => {
+    const { container: defaultContainer } = render(<Brand asset="glints" />);
+    expect(defaultContainer.querySelector('.brand-image')).toHaveStyleRule(
+      'width',
+      '5em'
+    );
+
+    const { container: horizontalContainer } = render(
+      <Brand asset="glints" variant="horizontal" />
+    );
+    expect(horizontalContainer.querySelector('.brand-image')).toHaveStyleRule(
+      'width',
+      '5em'
+    );
+
+    const { container: squareContainer } = render(
+      <Brand asset="glints-black" variant="square" />
+    );
+    expect(squareContainer.querySelector('.brand-image')).toHaveStyleRule(
+      'width',
+      '3em'
+    );
+  });
 });

src/General/Brand/Brand.tsx

@@ -25,6 +25,7 @@ const Brand = ({
   className,
   rightClickURL,
   onContextMenu,
+  variant = 'horizontal',
   ...defaultProps
 }: Props) => {
   const handleRightClick = (
@@ -84,6 +85,7 @@ const Brand = ({
         src={srcAsset}
         alt={alt}
         tabIndex={-1}
+        $variant={variant}
       />
     </BrandContainer>
   );
@@ -99,6 +101,8 @@ export type Props = React.ComponentPropsWithoutRef<typeof BrandContainer> & {
   rightClickURL?: string;
   /** Executes when the user right-clicks on the component */
   onContextMenu?(): void;
+  /** Display mode of the brand image */
+  variant?: 'square' | 'horizontal';
 };
 
 export default Brand;

src/General/Brand/BrandStyle.ts

@@ -14,9 +14,9 @@ export const BrandContainer = styled.div`
   }
 `;
 
-export const BrandImage = styled.img`
+export const BrandImage = styled.img<{ $variant?: 'square' | 'horizontal' }>`
   object-fit: contain;
-  width: 3em;
+  width: ${({ $variant }) => ($variant === 'square' ? '3em' : '5em')};
   height: 3em;
   outline: none;
 `;