groovinads-ui 1.2.9 → 1.2.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "groovinads-ui",
   "description": "Groovinads UI is a React component library designed exclusively for Groovinads applications. It provides ready-to-use UI elements styled according to Groovinads design guidelines to facilitate rapid development.",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "keywords": [
     "css",
     "sass",

package/src/components/Navigation/Navbar.jsx

@@ -1,15 +1,15 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React from 'react';
+import PropTypes from 'prop-types';
 
 // BOOTSTRAP
-import Container from "react-bootstrap/Container";
+import Container from 'react-bootstrap/Container';
 
 
 // COMPONENTS
-import { DeckDropdown, UserDropdown } from "./Dropdowns";
+import { DeckDropdown, UserDropdown } from './Dropdowns';
 
 // ASSETS
-const appLogo = "https://ui.groovinads.com/assets/groovinads-logo.svg";
+const appLogo = 'https://ui.groovinads.com/assets/groovinads-logo.svg';
 
 const Navbar = ({
   logoUrl,
@@ -18,21 +18,21 @@ const Navbar = ({
   children,
 }) => {
   return (
-    <div id="ga-header" className="header fixed-top shadow-2">
-      <Container fluid className="navbar">
-        <div className="brand-wrapper">
+    <div id='ga-header' className='header fixed-top shadow-2'>
+      <Container fluid className='navbar'>
+        <div className='brand-wrapper'>
           {/* Dropdown apps */}
 
           {showDeckMenu && <DeckDropdown />}
 
           <img
             src={logoUrl || appLogo}
-            className="ga-logo"
-            alt="Groovinads logo"
+            className='ga-logo'
+            alt='Groovinads logo'
           />
         </div>
         {(children || showUserMenu) && (
-          <div className="nav-wrapper">
+          <div className='nav-wrapper'>
             {children}
             {showUserMenu && <UserDropdown />}
           </div>

package/src/components/Navigation/Stepper.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Stepper = ({ children }) => {
+  return <ol className='stepper'>{children}</ol>;
+};
+
+Stepper.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+const StepperStep = ({ status, children }) => {
+  return (
+    <li className={`${status ? 'current' : ''}`}>
+      <span>{children}</span>
+    </li>
+  );
+};
+
+StepperStep.propTypes = {
+  status: PropTypes.oneOf(['current']),
+  children: PropTypes.node.isRequired,
+};
+
+export default Stepper;
+export { StepperStep };

package/src/components/Navigation/index.js

@@ -1,3 +1,4 @@
 import Navbar from './Navbar';
+import Stepper from './Stepper';
 
-export { Navbar }
+export { Navbar, Stepper }

package/src/stories/Stepper.stories.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Stepper, { StepperStep } from '../components/Navigation/Stepper';
+
+export default {
+  title: 'Navigation/Stepper',
+  component: Stepper,
+};
+
+const Template = (args) =>
+	<Stepper>
+		<StepperStep {...args}>Step 1</StepperStep>
+		<StepperStep {...args} status='current'>Step 2</StepperStep>
+		<StepperStep {...args}>Step 3</StepperStep>
+	</Stepper>;
+
+export const Default = Template.bind({});