inrupt · james-martin-jd · Apr 18, 2019 · Apr 2, 2019 · Apr 2, 2019 · Apr 2, 2019
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,22 @@
 # Solid React Application Generator
 
+## 0.4.2 (April 17, 2019)
+
+#### Solid React Application Base
+
+##### Updated
+* Changed favicon
+* Version number increment for the Solid Style Guide
+* Changed the name of the SDK across the site to "Solid React SDK by inrupt"
+
+##### Fixed
+* Form placeholder text now properly translates to Spanish
+* Responsive top navbar is more consistent in when it appears
+* Language selection dropdown now appears in the responsive top navbar when the user is not logged in
+* [FireFox] Responsive top navbar menu hover state is position properly
+* [Safari] Responsive top navbar hamburger menu list now displays properly
+
+
 ## 0.4.1 (April 4, 2019)
 
 #### Solid React Application Base

diff --git a/generators/app/templates/package-lock.json b/generators/app/templates/package-lock.json
diff --git a/generators/app/templates/package.json b/generators/app/templates/package.json
@@ -5,7 +5,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.6.3",
     "@fortawesome/react-fontawesome": "^0.1.4",
     "@inrupt/solid-react-components": "^0.3.2",
-    "@inrupt/solid-style-guide": "^0.1.26",
+    "@inrupt/solid-style-guide": "^0.1.34",
     "@rdfjs/data-model": "^1.1.1",
     "@solid/query-ldflex": "^2.4.0",
     "@svgr/webpack": "2.4.1",

diff --git a/generators/app/templates/public/favicon.ico b/generators/app/templates/public/favicon.ico
diff --git a/generators/app/templates/public/img/bars-nav.svg b/generators/app/templates/public/img/bars-nav.svg
diff --git a/generators/app/templates/public/locales/en-US/translation.json b/generators/app/templates/public/locales/en-US/translation.json
@@ -45,9 +45,15 @@
   "welcome": {
     "welcome": "Welcome",
     "doneMessage": "All done ?",
-    "title": "<0>This application was generated by the <1>React SDK for Solid.</1></0>",
-    "description": "<0>The <1>React SDK for Solid</1>  is a combination of libraries, components, documentation, best practices, and an application generator meant to accelerate the development of high-quality Solid applications:</0>",
+    "title": "<0>This application was generated by the <1>Solid React SDK by inrupt.</1></0>",
+    "description": "<0>The <1>Solid React SDK by inrupt</1>  is a combination of libraries, components, documentation, best practices, and an application generator meant to accelerate the development of high-quality Solid applications:</0>",
     "libraryList": "<0><0><0> Reusable Components </0>that you can use on your own in the applications that you build.</0><1><0>Application Generator</0>  that incorporates all of the components and best practices together for you, standing up THIS fully functional Solid React application. Note: The Solid React application illustrates the use of the components installed by the Generator. It should not be considered as a service provided by inrupt, and is subject to change.</1><1>Best practice patterns that you can reference as examples of how to accomplish particular things.</1></0>",
+    "fairUsageTitle": "Fair Usage",
+    "fairUsageText": "The Solid and inrupt logos included in the Generator are for the purposes of example and attribution. We expect application developers will fork the design system and customize to include your own brand in your Solid application projects, or override the example theme in your application code.",
+    "fairUsageExamples": "<0><0> If your application is Solid compatible, you can use the Solid logo to indicate that. If not, please don’t misrepresent yourself by using the Solid logo.</0><1>Please don't use the inrupt name as a part of your company name, website name, domain name, service name, or app name. Don't use our logo as your own or modify it to fit into your own logo.</1><2>If you’d like, you may use the inrupt logo to indicate that your application is powered by inrupt’s SDK, but please make sure the context is clear to the user. Your own logo should always be larger than inrupt’s logo, for example.</2></0>",
+    "fairUsageSummary": "In general, please apply common sense and honesty to your use of Solid or inrupt logos. Don’t use either to imply a partnership or official endorsement where none exists.",
+    "contactUsTitle": "Contact Us",
+    "contactUsText": "<0>If you have additional questions about the use of the Solid React SDK by inrupt, the Application Generator, or inrupt’s brand, please contact <1>support@inrupt.com<1>.</0>",
     "evolvingMessage": "<0>The SDK is continually evolving. Take a look at the <1>Release Timeline</1>  for what’s been implemented as part of the previous releases, and what's currently planned.</0>",
     "implementing": "This latest release builds on the prior versions:",
     "version010": "<0><0><0>Internationalization</0> best practices, with application session language selection.</0><0>Ability to update your profile image on the Welcome page.</0> </0>",

diff --git a/generators/app/templates/public/locales/en/translation.json b/generators/app/templates/public/locales/en/translation.json
@@ -45,9 +45,15 @@
   "welcome": {
     "welcome": "Welcome",
     "doneMessage": "All done ?",
-    "title": "<0>This application was generated by the <1>React SDK for Solid.</1></0>",
-    "description": "<0>The <1>React SDK for Solid</1>  is a combination of libraries, components, documentation, best practices, and an application generator meant to accelerate the development of high-quality Solid applications:</0>",
+    "title": "<0>This application was generated by the <1>Solid React SDK by inrupt.</1></0>",
+    "description": "<0>The <1>Solid React SDK by inrupt</1>  is a combination of libraries, components, documentation, best practices, and an application generator meant to accelerate the development of high-quality Solid applications:</0>",
     "libraryList": "<0><0><0> Reusable Components </0>that you can use on your own in the applications that you build.</0><1><0>Application Generator</0>  that incorporates all of the components and best practices together for you, standing up THIS fully functional Solid React application. Note: The Solid React application illustrates the use of the components installed by the Generator. It should not be considered as a service provided by inrupt, and is subject to change.</1><1>Best practice patterns that you can reference as examples of how to accomplish particular things.</1></0>",
+    "fairUsageTitle": "Fair Usage",
+    "fairUsageText": "The Solid and inrupt logos included in the Generator are for the purposes of example and attribution. We expect application developers will fork the design system and customize to include your own brand in your Solid application projects, or override the example theme in your application code.",
+    "fairUsageExamples": "<0><0> If your application is Solid compatible, you can use the Solid logo to indicate that. If not, please don’t misrepresent yourself by using the Solid logo.</0><1>Please don't use the inrupt name as a part of your company name, website name, domain name, service name, or app name. Don't use our logo as your own or modify it to fit into your own logo.</1><2>If you’d like, you may use the inrupt logo to indicate that your application is powered by inrupt’s SDK, but please make sure the context is clear to the user. Your own logo should always be larger than inrupt’s logo, for example.</2></0>",
+    "fairUsageSummary": "In general, please apply common sense and honesty to your use of Solid or inrupt logos. Don’t use either to imply a partnership or official endorsement where none exists.",
+    "contactUsTitle": "Contact Us",
+    "contactUsText": "<0>If you have additional questions about the use of the Solid React SDK by inrupt, the Application Generator, or inrupt’s brand, please contact <1>support@inrupt.com<1>.</0>",
     "evolvingMessage": "<0>The SDK is continually evolving. Take a look at the <1>Release Timeline</1>  for what’s been implemented as part of the previous releases, and what's currently planned.</0>",
     "implementing": "This latest release builds on the prior versions:",
     "version010": "<0><0><0>Internationalization</0> best practices, with application session language selection.</0><0>Ability to update your profile image on the Welcome page.</0> </0>",

diff --git a/generators/app/templates/public/locales/es/translation.json b/generators/app/templates/public/locales/es/translation.json
@@ -45,9 +45,15 @@
   "welcome": {
     "welcome": "Bienvenido",
     "doneMessage": "¿Terminaste?",
-    "title": "<0>Esta aplicacion fue generada con <1>React SDK for Solid.</1></0>",
-    "description": "<0>El <1>React SDK for Solid</1>  es una combinación de librerias, componentes, documentación, buenas prácticas y un generador de aplicaciones diseñada para acelerar el desarrollo de aplicaciones Solid de alta calidad:</0>",
+    "title": "<0>Esta aplicacion fue generada con <1>Solid React SDK by inrupt.</1></0>",
+    "description": "<0>El <1>Solid React SDK by inrupt</1>  es una combinación de librerias, componentes, documentación, buenas prácticas y un generador de aplicaciones diseñada para acelerar el desarrollo de aplicaciones Solid de alta calidad:</0>",
     "libraryList": "<0><0><0> Componentes reutilizables </0>que puedes utilizar en tus propias aplicaciones.</0><1><0>Generador de aplicaciones</0>, incorpora todos los componentes y las buenas practicas en una misma aplicacion para el desarrollador. Nota: La aplicaciones Solid React, muestra el uso de los componentes instalados por el generador. No debe ser considerado como un servicio que Inrupt provee, y está sujeto a cambios.</0><0>Patrones de buenas prácticas que puedes referenciar como ejemplos para lograr resolver diferentes situaciones.</1></0>",
+    "fairUsageTitle": "Condiciones de uso",
+    "fairUsageText": "Los logos de Solid y Inrupt incluidos en este SDK son exclusivamente para ejemplo. Esperamos que los desarrolladores que utilicen nuestro SDK para propósitos comerciales los actualicen con sus propios logos.",
+    "fairUsageExamples": "<0><0>Si su aplicación es combatible con Solid, usted puede utilizarlo para indicarlo, de lo contrario no usarlo.</0><1>No utilice el nombre de Inrupt como parte del nombre de su empresa, sitio web, dominio,  servicio o nombre de la aplicación. No modifique o utilice nuestros logos como suyos.</1><2>Si lo desea, puede usar el logotipo de Inrupt para indicar que su aplicación funciona con el SDK de Inrupt, pero asegúrese de que el contexto sea claro para el usuario. Por ejemplo su propio logotipo siempre debe ser más grande que el logotipo de Inrupt.</2></0>",
+    "fairUsageSummary": "En general, aplique sentido común y honestidad a su uso de los logotipos de Solid o Inrupt. No utilice para implicar una asociación o respaldo oficial donde no exista.",
+    "contactUsTitle": "Contáctenos",
+    "contactUsText": "<0>\nSi tiene preguntas adicionales sobre el uso de nuestro Solid React SDK by inrupt, el Generador de aplicaciones o la marca de Inrupt, contáctese con <1>support@inrupt.com<1>.</0>",
     "evolvingMessage": "<0>El SDK se encuentra en constante evolución. Revisa el <1>Calendario de Desarrollo</1>  para lo que está planeado.</0>",
     "implementing": "Esta última version se basa en las anteriores, incluye:",
     "version010": "<0><0>Mejores prácticas para la <0>Internacionalización</0>, con selector de lenguaje para la sesión.</0><1>Habilidad para actualizar la imagen de perfil en la página de bienvenida.</1> </0>",

diff --git a/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js b/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js
@@ -29,7 +29,7 @@ const AuthNavBar = props => {
           id: "language"
         },
         {
-          component: () => <NavBarProfile {...props} />,
+          component: ({open, customClass}) => <NavBarProfile {...props} open={open} customClass={customClass} />,
           id: "profile"
         }
       ]}

diff --git a/...p/templates/src/components/AuthNavBar/children/NavbarProfile/nav-bar-profile.component.js b/...p/templates/src/components/AuthNavBar/children/NavbarProfile/nav-bar-profile.component.js
@@ -1,80 +1,92 @@
-import React, { Component } from "react";
-import styled from "styled-components";
-import { Dropdown } from "@util-components";
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import { Dropdown } from '@util-components';
 
-import auth from "solid-auth-client";
+import auth from 'solid-auth-client';
 
 export const ImageContainer = styled.div`
-  width: 42px;
-  height: 42px;
-  border-radius: 50%;
-  background-size: cover;
-  overflow: hidden;
-  visibility: ${({ show }) => (show ? "visible" : "hidden")};
-  display: ${({ show }) => (show ? "block" : "none")};
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    background-size: cover;
+    overflow: hidden;
+    visibility: ${({ show }) => (show ? 'visible' : 'hidden')};
+    display: ${({ show }) => (show ? 'block' : 'none')};
 `;
 
 export const Img = styled.img`
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
 `;
 
 export const LoadingImage = styled(ImageContainer)`
-  background: #cccccc;
-  display: block;
+    background: #cccccc;
+    display: block;
+`;
+
+export const UserName = styled.span`
+  display: inline-block;
+  margin-left: 10px;
 `;
 
 class NavBarProfile extends Component {
-  state = {
-    imageLoaded: false
-  };
+    state = {
+        imageLoaded: false,
+    };
 
-  profileRedirect = () => this.props.history.push("/profile");
+    profileRedirect = () => this.props.history.push('/profile');
 
-  onImageLoaded = async () => this.setState({ imageLoaded: true });
-  logOut = async () => {
-    try {
-      await auth.logout();
-      // Remove localStorage
-      localStorage.removeItem("solid-auth-client");
-      // Redirect to login page
-      this.props.history.push("/login");
-    } catch (error) {
-      // console.log(`Error: ${error}`);
-    }
-  };
-  render() {
-    const { t, img } = this.props;
-    const { imageLoaded } = this.state;
+    onImageLoaded = async () => this.setState({ imageLoaded: true });
+    logOut = async () => {
+        try {
+            await auth.logout();
+            // Remove localStorage
+            localStorage.removeItem('solid-auth-client');
+            // Redirect to login page
+            this.props.history.push('/login');
+        } catch (error) {
+            // console.log(`Error: ${error}`);
+        }
+    };
+    render() {
+        const { t, img, open, customClass } = this.props;
+        const { imageLoaded } = this.state;
 
-    const profileOpts = [
-      {
-        label:  t("navBar.profile"),
-        onClick: this.profileRedirect
-      },
-      {
-        label: t("navBar.logOut"),
-        onClick: this.logOut
-      }
-    ];
+        const profileOpts = [
+            {
+                label: t('navBar.profile'),
+                onClick: this.profileRedirect,
+                icon: 'cog'
+            },
+            {
+                label: t('navBar.logOut'),
+                onClick: this.logOut,
+                icon: 'lock'
+            },
+        ];
 
-    return img ? (
-      <Dropdown actions={profileOpts} className="nav-bar--profile" hover={true}>
-        <ImageContainer show={imageLoaded}>
-          <Img
-            show={imageLoaded}
-            src={img}
-            alt="profile"
-            onLoad={this.onImageLoaded}
-          />
-        </ImageContainer>
-        {!imageLoaded && <LoadingImage show={true} />}
-      </Dropdown>
-    ) : (
-      <div />
-    );
-  }
+        return img ? (
+            <Dropdown
+                actions={profileOpts}
+                className={`nav-bar--profile ${customClass}`}
+                hover={true}
+                open={open}
+            >
+                <ImageContainer show={imageLoaded}>
+                    <Img
+                        show={imageLoaded}
+                        src={img}
+                        alt="profile"
+                        onLoad={this.onImageLoaded}
+                    />
+                </ImageContainer>
+                {!imageLoaded && <LoadingImage show={true} />}
+            </Dropdown>
+        ) : (
+            <div />
+        );
+    }
 }
 
 export default NavBarProfile;
diff --git a/...ators/app/templates/src/components/NavBar/children/HamburgerButton/hamburger.component.js b/...ators/app/templates/src/components/NavBar/children/HamburgerButton/hamburger.component.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const HamburgerButton = ({ toggleMobileMenu }) => {
+    return (
+        <div className="mobile-navigation__toggle">
+            <button onClick={toggleMobileMenu}>
+                <span className="icon">
+                    <img src="/img/bars-nav.svg" alt={'Icon Menu'}/>
+                </span>
+            </button>
+        </div>
+    );
+};
+
+export default HamburgerButton;
diff --git a/generators/app/templates/src/components/NavBar/children/HamburgerButton/index.js b/generators/app/templates/src/components/NavBar/children/HamburgerButton/index.js
@@ -0,0 +1,3 @@
+import HamburgerButton  from './hamburger.component';
+
+export default HamburgerButton;
diff --git a/generators/app/templates/src/components/NavBar/children/MobileNavigation/index.js b/generators/app/templates/src/components/NavBar/children/MobileNavigation/index.js
@@ -0,0 +1,3 @@
+import MobileNavigation from './mobile.navigation.component';
+
+export default MobileNavigation;
diff --git a/.../templates/src/components/NavBar/children/MobileNavigation/mobile.navigation.component.js b/.../templates/src/components/NavBar/children/MobileNavigation/mobile.navigation.component.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { LanguageDropdown } from "@util-components";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { withTranslation } from "react-i18next";
+
+import { TopNavigation } from './mobile.navigation.style';
+
+const MobileNavigation = ({ children, toggleMobileMenu, isOpenMobile, t, i18n }) => {
+    const isActive = isOpenMobile ? 'active slideLeft' : 'hidden';
+
+    return (
+        <section className={`mobile-navigation-panel ${isActive}`}>
+            <div className="mobile-navigation-panel__wrap">
+                <TopNavigation>
+                  <LanguageDropdown {...{t, i18n}}/>
+                  <div className="close-panel__toggle">
+                      <button onClick={toggleMobileMenu}>
+                          <FontAwesomeIcon className="icon" icon="times"/>
+                      </button>
+                  </div>
+                </TopNavigation>
+                {children}
+            </div>
+        </section>
+    );
+};
+
+export default withTranslation()(MobileNavigation);
+
diff --git a/.../app/templates/src/components/NavBar/children/MobileNavigation/mobile.navigation.style.js b/.../app/templates/src/components/NavBar/children/MobileNavigation/mobile.navigation.style.js
@@ -0,0 +1,22 @@
+import styled from "styled-components";
+
+
+export const TopNavigation = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  margin: 15.5px 0;
+
+  div:first-child {
+    grid-column: 1 / 3;
+  }
+
+  button {
+    margin: 0;
+  }
+
+  .close-panel__toggle {
+    text-align: right;
+    padding-right: 20px;
+  }
+`;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import HamburgerButton from './hamburger.component';

		export default HamburgerButton;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import MobileNavigation from './mobile.navigation.component';

		export default MobileNavigation;