Merge pull request #1796 from natura-cosmeticos/DSY-3330

Dsy 3330 - Add template Login

packages/react/.storybook/preview-head.html

@@ -1,5 +1,5 @@
 <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500&display=swap" rel="stylesheet" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/[email protected].1/dist/natds-icons.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/[email protected].5/dist/natds-icons.css" />
 
 <link href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-themes@latest/dist/assets/aesop_fonts.css" rel="stylesheet" />
 <link href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-themes@latest/dist/assets/avon_fonts.css" rel="stylesheet" />

packages/react/.storybook/preview.js

@@ -1,13 +1,62 @@
 import ThemeDecorator from "./decorators/themeDecorator";
 import { dark, light } from "./theme";
 
+const viewportDS = {
+  ["Extra small"]: {
+    name: 'Extra small',
+    styles: {
+      width: '576px',
+      height: '100vh'
+    }
+  },
+  small: {
+    name: 'Small',
+    styles: {
+      width: '768px',
+      height: '100vh'
+    }
+  },
+  Medium: {
+    name: 'Medium',
+    styles: {
+      width: '1024px',
+      height: '100vh'
+    }
+  },
+  Large: {
+    name: 'Large',
+    styles: {
+      width: '1280px',
+      height: '100vh'
+    }
+  },
+  ["Extra Large"]: {
+    name: 'Extra Large',
+    styles: {
+      width: '1440px',
+      height: '100vh'
+    }
+  },
+  ["Extra extra Large"]: {
+    name: 'Extra extra Large',
+    styles: {
+      width: '100%',
+      height: '100vh'
+    }
+  },
+}
+
 export { globalTypes } from "./globalTypes";
 export const decorators = [ThemeDecorator]
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   backgrounds: { disable: true, grid: { disable: true } },
-  viewport: { disable: true },
+  viewport: { 
+    disable: false,
+    viewports: viewportDS
+
+  },
   darkMode: {
     dark,
     light

packages/react/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.53.0](https://github.com/natura-cosmeticos/natds-js/compare/@naturacosmeticos/[email protected]...@naturacosmeticos/[email protected]) (2023-09-18)
+
+* **natds-react:** Add template Login
+
 # [2.52.0](https://github.com/natura-cosmeticos/natds-js/compare/@naturacosmeticos/[email protected]...@naturacosmeticos/[email protected]) (2023-09-05)
 
 * **natds-react:** Add stories search IconButton

packages/react/package.json

@@ -2,7 +2,7 @@
   "name": "@naturacosmeticos/natds-react",
   "displayName": "NatDS-React",
   "description": "A collection of components from Natura Design System for React",
-  "version": "2.52.0",
+  "version": "2.53.0-alpha.DSY-3330.5.0",
   "private": false,
   "keywords": [
     "design-system",
@@ -57,8 +57,8 @@
     "generate": "yarn plop --plopfile ./generators/plopfile.js"
   },
   "dependencies": {
-    "@naturacosmeticos/natds-icons": "1.16.1",
-    "@naturacosmeticos/natds-themes": "0.59.11",
+    "@naturacosmeticos/natds-icons": "1.16.5",
+    "@naturacosmeticos/natds-themes": "0.59.24",
     "react-jss": "10.9.0"
   },
   "devDependencies": {

packages/react/src/Templates/GlobalTypes/index.ts

@@ -1,7 +1,6 @@
 export type BrandProps = 'aesop'
     | 'avon'
     | 'avon_v2'
-    | 'biome'
     | 'natura'
     | 'theBodyShop'
     | 'consultoriaDeBeleza'

packages/react/src/Templates/Login/Login.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+import Login, { openIMG } from './Login'
+
+const componentStatus = `
+- - -
+
+**NOTE FOR UXs**: This is exemplo template:
+- - -
+`
+
+export default {
+  title: 'Templates/Login',
+  component: Login,
+  parameters: {
+    componentSubtitle: 'This is an example of implementing the theme on a Login page',
+    docs: { description: { component: componentStatus } }
+  }
+} as Meta
+
+export const Playground: Story<openIMG> = (args) => (
+
+  <Login {...args} />
+
+)
+Playground.args = {
+  openIMG: false
+}
+
+// export const TemplateCheckoutMobile: Story = () => (
+//   <div style={{ maxWidth: '360px' }}>
+
+//     <Checkout />
+//   </div>
+
+// )

packages/react/src/Templates/Login/Login.style.ts

@@ -0,0 +1,118 @@
+/* eslint-disable max-len */
+import { createUseStyles } from 'react-jss'
+import { Theme } from '@naturacosmeticos/natds-themes'
+
+const styles = createUseStyles((theme: Theme) => ({
+
+  container: {
+    display: 'flex',
+    position: 'relative',
+    fontFamily: [theme.tag.label.primary.fontFamily, theme.tag.label.fallback.fontFamily],
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    border: ' 1px solid #0000001F',
+    gap: theme.size.micro,
+    boxSizing: '-moz-initial',
+    minWidth: 360,
+    width: '100%',
+    fontWeight: theme.typography.fontWeight.medium,
+    fontSize: theme.typography.fontSize.level2
+  },
+  wrapper: {
+    width: '100%',
+    maxWidth: 328,
+    minHeight: '90px'
+  },
+  wrapperBTN: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    marginBottom: '80px',
+    maxWidth: 328,
+    gap: 16
+  },
+  wrapperLogo: {
+    display: 'flex',
+    width: '100%',
+    marginBottom: '40px',
+    alignItems: 'center',
+    flexDirection: 'column'
+  },
+  wrapperLogin: {
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column',
+    width: '100%',
+    minHeight: '200px',
+    marginBottom: '13px',
+    gap: '24px'
+  },
+  wrapperChecks: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    marginBottom: '67px',
+    maxWidth: 328
+  },
+  row: {
+    display: 'flex',
+    alignContent: 'center',
+    justifyContent: 'center',
+    width: '100%'
+  },
+  colLeft: {
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column',
+    paddingTop: '150px',
+    width: '100%'
+  },
+  colRight: {
+    overflow: 'hidden',
+    width: '100%',
+    height: '900px'
+  },
+  btnOpenIMG: {
+    display: 'flex',
+    position: 'absolute',
+    // border: '1px solid red',
+    top: 5,
+    left: 5
+  },
+
+  '@media screen and (max-width: 1280px)': {
+    containerStep: {
+      display: 'flex',
+      justifyContent: 'center',
+      flexDirection: 'column',
+      // border: '1px solid yellow',
+      minHeight: '80px',
+      width: '100%',
+      gap: 24,
+      overflow: 'hidden'
+    },
+    containerSection: {
+      display: 'flex',
+      width: '100%',
+      gap: 16,
+      flexDirection: 'column-reverse',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    summaryContainer: {
+      display: 'flex',
+      width: '100%',
+      // alignItems: 'start',
+      maxWidth: 'unset',
+      minHeight: 'unset',
+      flexDirection: 'column',
+      justifyContent: 'start',
+      backgroundColor: theme.color.surface,
+      gap: 4
+    }
+  }
+}))
+
+export default styles

packages/react/src/Templates/Login/Login.tsx

@@ -0,0 +1,94 @@
+/* eslint-disable no-shadow */
+/* eslint-disable complexity */
+import React, { useEffect, useState } from 'react'
+import styles from './Login.style'
+import TextField from '../../components/TextField/TextField'
+import Logo from '../../components/Logo/Logo'
+import Icon from '../../components/Icon'
+import CheckBox from '../../components/Checkbox'
+import Link from '../../components/Link'
+import Button from '../../components/Button'
+// import Image from '../../components/Image'
+import useMedia from '../hookMedia/useMedia'
+
+const URLIMG = 'https://www.naturaeco.com/wp-content/uploads/sites/428/2021/06/NET-ZERO-scaled.jpg'
+export interface openIMG {
+  openIMG: boolean
+}
+const Login: React.FC<openIMG> = ({ openIMG }) => {
+  const [password, setPassword] = useState<string>('Hello World')
+  const [email, setEmail] = useState<string>('')
+  const [passwordTrans, setPasswordTrans] = useState<boolean>(false)
+  const [check, setCheck] = useState<boolean>(false)
+  const [openImg, setOpenImg] = useState<boolean>(false)
+  const { mediaOn } = useMedia(768)
+  const {
+    container, wrapper, wrapperLogin,
+    wrapperLogo, wrapperChecks, wrapperBTN, row, colLeft, colRight
+  } = styles()
+
+  useEffect(() => {
+    setOpenImg(openIMG)
+  }, [openIMG])
+
+  return (
+    <div className={container}>
+      <div className={row}>
+        <div className={colLeft}>
+          <div className={wrapperLogo}>
+            <Logo />
+          </div>
+          <div className={wrapperLogin}>
+            <div className={wrapper}>
+              <TextField
+                size="mediumX"
+                id="LoginEmail"
+                ariaLabel="Email"
+                onClick={() => setPasswordTrans(!passwordTrans)}
+                onChange={(e) => setEmail(e.target.value)}
+                value={email}
+                type="text"
+                label="Login"
+              />
+
+            </div>
+            <div className={wrapper}>
+              <TextField
+                id="LoginPass"
+                ariaLabel="Pass"
+                onClick={() => setPasswordTrans(!passwordTrans)}
+                onChange={(e) => setPassword(e.target.value)}
+                value={password}
+                type={`${passwordTrans ? 'text' : 'password'}`}
+                label="Password"
+                action="icon"
+                IconComponent={passwordTrans ? <Icon name="outlined-action-visibility" color="highEmphasis" /> : <Icon name="outlined-action-visibilitysleeping" color="highEmphasis" />}
+              />
+            </div>
+          </div>
+          <div className={wrapperChecks}>
+            <CheckBox value="" label="Remember me" checked={check} onChange={() => setCheck(!check)} />
+            <Link text="Forgot password?" href="https://" />
+          </div>
+          <div className={wrapperBTN}>
+            <Button size="medium" fullWidth onClick={() => ''}>Login</Button>
+            <Button variant="outlined" size="medium" fullWidth onClick={() => ''}>Sign In</Button>
+          </div>
+        </div>
+        {
+          !mediaOn && openImg && (
+            <div className={colRight}>
+              {/* <Image sourceImage={URLIMG} /> */}
+              <img src={URLIMG} alt="" width="1280" />
+
+            </div>
+          )
+        }
+
+      </div>
+
+    </div>
+  )
+}
+
+export default Login

packages/react/src/components/Snackbar/Snackbar.styles.ts

@@ -129,7 +129,7 @@ const styles = createUseStyles<RuleNames, snackbarStyleProps, Theme>((theme: The
   },
   wrapperRow: {
     display: 'flex',
-    alignItems: 'start',
+    alignItems: 'center',
     width: '100%',
     gap: '8px'
   },