Merge pull request #662 from puppetlabs/CDPE-6574/update-authenticati…

…on-component (CDPE-6574) Update authentication component
puppetlabs · Apr 11, 2024 · 032d822 · 032d822
2 parents 5c4bc31 + 2aa7e20
commit 032d822
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+## react-components 5.34.8 (2024-04-10)
+
+- [Logo] Revert continuous delivery logo viewBox size due to alignment issues (by [@petergmurphy](https://github.com/petergmurphy))
+
+## react-layouts 2.0.0-alpha.11 (2024-04-10)
+
+- [Authentication] Update Authentication component to support a footer prop (by [@petergmurphy](https://github.com/petergmurphy))
+
 ## react-components 5.34.7 (2024-04-03)
 
 - [Popover] Add new side prop options to enable rendering the arrow in all corners of the box (by [@sean-mckenna](https://github.com/sean-mckenna)) in [#661](https://github.com/puppetlabs/design-system/pull/661))

diff --git a/packages/react-components/package-lock.json b/packages/react-components/package-lock.json
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@puppet/react-components",
-  "version": "5.34.7",
+  "version": "5.34.8",
   "author": "Puppet, Inc.",
   "license": "Apache-2.0",
   "main": "build/library.js",
@@ -91,4 +91,4 @@
     "regenerator-runtime": "^0.13.7",
     "scroll-into-view-if-needed": "^2.2.25"
   }
-}
+}
diff --git a/packages/react-components/source/react/library/logo/logos.js b/packages/react-components/source/react/library/logo/logos.js
diff --git a/packages/react-layouts/package-lock.json b/packages/react-layouts/package-lock.json
diff --git a/packages/react-layouts/package.json b/packages/react-layouts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@puppet/react-layouts",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.11",
   "author": "Puppet, Inc.",
   "license": "Apache-2.0",
   "main": "dist/react-layouts.js",
@@ -93,4 +93,4 @@
     "webpack-merge": "^4.2.2",
     "webpack-node-externals": "^1.7.2"
   }
-}
+}
diff --git a/packages/react-layouts/src/Authentication/Authentication.jsx b/packages/react-layouts/src/Authentication/Authentication.jsx
@@ -20,12 +20,15 @@ const propTypes = {
   className: PropTypes.string,
   /** Content, rendered inside a centered card */
   children: PropTypes.node,
+  /** Footer content, rendered below the card */
+  footer: PropTypes.node,
 };
 
 const defaultProps = {
   subtitle: '',
   className: '',
   children: null,
+  footer: null,
 };
 
 const Authentication = ({
@@ -34,6 +37,7 @@ const Authentication = ({
   subtitle,
   className,
   children,
+  footer,
   ...rest
 }) => {
   const logoType = Logo.SUPPORTED_LOGOS.includes(product) ? 'full' : 'bug';
@@ -45,21 +49,24 @@ const Authentication = ({
       innerClassName="rl-authentication"
       {...rest}
     >
-      <Logo
-        type={logoType}
-        className={classNames(
-          'rl-authentication-logo',
-          `rl-authentication-logo-${logoType}`,
-        )}
-        product={product}
-      />
-      <Card className="rl-authentication-content">
-        <div className="rl-authentication-title">
-          <Heading as="h3">{title}</Heading>
-          <div className="rl-authentication-subtitle">{subtitle}</div>
-        </div>
-        {children}
-      </Card>
+      <div className="rl-authentication-content">
+        <Logo
+          type={logoType}
+          className={classNames(
+            'rl-authentication-logo',
+            `rl-authentication-logo-${logoType}`,
+          )}
+          product={product}
+        />
+        <Card className="rl-authentication-card">
+          <div className="rl-authentication-title">
+            <Heading as="h2">{title}</Heading>
+            <div className="rl-authentication-subtitle">{subtitle}</div>
+          </div>
+          {children}
+        </Card>
+      </div>
+      {footer && <footer className="rl-authentication-footer">{footer}</footer>}
     </PageContent>
   );
 };

diff --git a/packages/react-layouts/src/Authentication/Authentication.md b/packages/react-layouts/src/Authentication/Authentication.md
@@ -5,9 +5,28 @@
 # Example: Login
 
 ```jsx
-import { Form } from '@puppet/react-components';
+import { Form, Logo } from '@puppet/react-components';
+
+const FooterExample = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+      }}
+    >
+      <Logo style={{ height: '19px' }} product="puppet-standalone" />
+      Puppet | Footer example
+    </div>
+  );
+};
 
-<Authentication product="My Product" title="Sign in to My Product">
+<Authentication
+  product="My Product"
+  title="Sign in to My Product"
+  footer={<FooterExample />}
+>
   <Form submittable actionsPosition="block" submitLabel="Sign in">
     <Form.Field
       type="email"

diff --git a/packages/react-layouts/src/Authentication/Authentication.scss b/packages/react-layouts/src/Authentication/Authentication.scss
@@ -4,8 +4,7 @@
   align-items: center;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  min-height: 100%;
+  gap: 32px;
 }
 
 .rl-authentication-logo {
@@ -26,10 +25,18 @@
 }
 
 .rl-authentication-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+}
+
+.rl-authentication-card {
   display: flex;
   margin-top: 32px;
-  max-width: 410px;
   padding: 48px;
+  max-width: 500px;
   width: 100%;
 }