#97 - Adds small adjustments in styles. Adds inline documentation to …

…the 'data' service.
UXPin · Aug 3, 2020 · 15faa40 · 15faa40
1 parent 320d91f
commit 15faa40
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 91 deletions.
diff --git a/src/components/cells/internal-link.jsx b/src/components/cells/internal-link.jsx
@@ -21,24 +21,26 @@ InternalLinkCell.propTypes = {
 };
 
 export const StyledLink = styled(Link)`
-  display: flex;
   color: ${table.typography.color};
-  text-decoration: none;
-
+  display: flex;
   padding-left: ${table.space.cellPadding};
   padding-right: ${table.space.cellPadding};
+  text-decoration: none;
+
   &:hover {
     color: ${table.typography.hoveredLink};
     text-decoration: underline;
+
     span > svg {
       fill: ${table.typography.hoveredLink};
     }
   }
+
   span {
-    display: flex;
     align-items: center;
+    display: flex;
     height: 24px;
-    width: 14px;
     margin-right: 3px;
+    width: 14px;
   }
 `;
diff --git a/src/components/sectionHeader/section-header.jsx b/src/components/sectionHeader/section-header.jsx
@@ -3,17 +3,17 @@ import PropTypes from 'prop-types';
 import StyledSectionHeader from './section-header.styles';
 
 const SectionHeader = ({
+  className,
   content,
   id,
-  className,
 }) => (
   <StyledSectionHeader id={id} className={className}>{content}</StyledSectionHeader>
 );
 
 SectionHeader.propTypes = {
+  className: PropTypes.string,
   content: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
-  className: PropTypes.string,
 };
 
 SectionHeader.defaultProps = {

diff --git a/src/components/table/table.jsx b/src/components/table/table.jsx
@@ -31,8 +31,8 @@ export default class Table extends Component {
       dataf,
       filter,
       filtersValues,
-      header,
       fixedColumns,
+      header,
     } = this.props;
 
     /* Function first checks if it's being asked to generate filters for
@@ -55,21 +55,21 @@ export default class Table extends Component {
 
       return (
         <StyledTh
-          key={item}
-          id={`${item}Filter`}
           className={item === 'company' || item === 'system' ? 'fixed' : ''}
+          id={`${item}Filter`}
+          key={item}
           title={title}
         >
           <Filters
-            filter={filter}
-            dataf={dataf}
-            values={filtersValues}
             category={item}
+            dataf={dataf}
+            filter={filter}
             /* Due to absolute positioning of fixed header from tHead at the bottom
             ** of the table, I'm modifying all tabIndexes. Props tab passes the right values.
             ** Fixed elements get lower tabIndexed to be focused before the main part of the table.
-             */
+            */
             tab={fixed === false ? 3 : 2}
+            values={filtersValues}
           />
         </StyledTh>
       );
@@ -104,17 +104,17 @@ export default class Table extends Component {
 
       return (
         <StyledTh
-          key={item}
           className={item === 'company' || item === 'system' ? 'fixed' : ''}
+          key={item}
           id={`${item}Header`}
         >
           <StyledThWrapper>
             <StyledLabel>{label}</StyledLabel>
             <Sorting
+              activeSorter={activeSorter}
+              category={item}
               sort={sort}
               sorting={sorting}
-              category={item}
-              activeSorter={activeSorter}
               /* Due to absolute positioning of fixed header from tHead at the bottom
               ** of the table, I'm modifying all tabIndexes. Props tab passes the right values.
               ** Fixed elements get lower tabIndexed to be focused
@@ -163,10 +163,12 @@ export default class Table extends Component {
         </StyledEmptyMessageTr>
       );
     }
+
     return data.map((item, i) => {
+      const id = item.company.id;
       /* Get list of all the properties for a given company / system (every one in a <tr>) */
       const properties = Object.keys(item);
-      const id = item.company.id;
+
       return (
         <tr id={id} key={item + id} title={`${item.company.data} - ${item.system.data}`}>
           <td tabIndex={-1}>
@@ -221,10 +223,10 @@ export default class Table extends Component {
 
       return (
         <td
-          title={title}
-          key={category}
           className={className}
           id={`${id}${category}`}
+          key={category}
+          title={title}
         >
           <div className="cell-wrapper">
             {content}
@@ -242,21 +244,21 @@ export default class Table extends Component {
 
       return (
         <td
-          key={category}
-          id={`${id}${category}`}
           className={className}
+          id={`${id}${category}`}
+          key={category}
         >
           <div className="cell-wrapper">
             <ul>
               {data[index][category].url
                 ? array.map((elem, i) => (
                   <li key={(elem, i)}>
                     <StyledExternalLink
-                      title={`${titleForArray} ${array[i]}`}
-                      href={arrayUrl[i]}
                       className="external-link"
-                      target="_blank"
+                      href={arrayUrl[i]}
                       tabIndex={5}
+                      target="_blank"
+                      title={`${titleForArray} ${array[i]}`}
                     >
                       <Icon i={link} size="s" color="#ffffff" in="no" active />
                       {elem}
@@ -306,22 +308,13 @@ export default class Table extends Component {
 ** data would be impossible and limiting.
 */
 Table.propTypes = {
-  dataf: PropTypes.array.isRequired,
+  activeSorter: PropTypes.string.isRequired,
   data: PropTypes.array.isRequired,
-  header: PropTypes.array.isRequired,
+  dataf: PropTypes.array.isRequired,
   filter: PropTypes.func.isRequired,
   filtersValues: PropTypes.object.isRequired,
+  fixedColumns: PropTypes.array.isRequired,
+  header: PropTypes.array.isRequired,
   sort: PropTypes.func.isRequired,
   sorting: PropTypes.string.isRequired,
-  activeSorter: PropTypes.string.isRequired,
-  fixedColumns: PropTypes.array.isRequired,
-  // filtersHeight: PropTypes.number,
-  // /fixedHeaderHeight: PropTypes.number.isRequired,
-  /* filteredCat: PropTypes.bool.isRequired, */
-  /* heights: PropTypes.arrayOf(PropTypes.shape).isRequired, */
-  /* refreshAfterFilterCat: PropTypes.func.isRequired, */
 };
-
-// Table.defaultProps = {
-//   filtersHeight: 80,
-// };
diff --git a/src/components/topBar/top-bar.jsx b/src/components/topBar/top-bar.jsx
@@ -6,7 +6,7 @@ import { StyledTopBar, StyledBrand } from './top-bar.styles';
 import Logo from '../logo/logo';
 import Social from '../social/social';
 
-const TopBar = ({ scroll, breadcrumbs }) => (
+const TopBar = ({ breadcrumbs, scroll }) => (
   <StyledTopBar scroll={scroll} id="top-bar">
     <StyledBrand scroll={scroll}>
       <Logo tab={1} />
@@ -27,20 +27,20 @@ const TopBar = ({ scroll, breadcrumbs }) => (
     </StyledBrand>
     <Social
       networks={['twitter', 'facebook', 'linkedin']}
-      url="https://www.uxpin.com/adele"
       tab={1}
+      url="https://www.uxpin.com/adele"
     />
   </StyledTopBar>
 );
 
 TopBar.propTypes = {
-  scroll: PropTypes.bool,
   breadcrumbs: PropTypes.string,
+  scroll: PropTypes.bool,
 };
 
 TopBar.defaultProps = {
-  scroll: false,
   breadcrumbs: '',
+  scroll: false,
 };
 
 export { TopBar as default };
diff --git a/src/containers/appContainer/app-container.jsx b/src/containers/appContainer/app-container.jsx
@@ -48,22 +48,22 @@ export default class App extends Component {
                 <SectionHeader content="do you need help with your system?" id="uxpin-info" />
                 <StyledTwoColumns>
                   <UXPinPromo
-                    header="Evangelize Design System with a Free Template!"
-                    text="40+ Slides ready for action. Perfect for team and stakeholder presentation.
-                      Available as a powerpoint and keynote deck."
-                    buttonLabel="Learn more &amp; download"
                     alt="Slide Icon"
+                    buttonLabel="Learn more &amp; download"
+                    header="Evangelize Design System with a Free Template!"
                     image={deck}
                     link="https://www.uxpin.com/evangelizing-design-system-roi-template?utm_source=adele.uxpin.com&utm_medium=upartner&utm_campaign=Adele"
+                    text="40+ Slides ready for action. Perfect for team and stakeholder presentation.
+                      Available as a powerpoint and keynote deck."
                   />
                   <UXPinPromo
-                    header="UXPin: Prototype and Manage Your Design System"
-                    text="Join thousands of companies (including PayPal, Sapient and HBO)
-                    and optimize your design process with UXPin."
-                    buttonLabel="Start a free trial now!"
                     alt="Prototyping Icon"
+                    buttonLabel="Start a free trial now!"
+                    header="UXPin: Prototype and Manage Your Design System"
                     image={prototyping}
                     link="https://www.uxpin.com?utm_source=adele.uxpin.com&utm_medium=upartner&utm_campaign=Adele"
+                    text="Join thousands of companies (including PayPal, Sapient and HBO)
+                    and optimize your design process with UXPin."
                   />
                 </StyledTwoColumns>
               </InfoContainer>
@@ -77,22 +77,22 @@ export default class App extends Component {
                 <SectionHeader content="do you need help with your system?" id="uxpin-info" />
                 <StyledTwoColumns>
                   <UXPinPromo
-                    header="Evangelize Design System with a Free Template!"
-                    text="40+ Slides ready for action. Perfect for team and stakeholder presentation.
-                      Available as a powerpoint and keynote deck."
-                    buttonLabel="Learn more &amp; download"
                     alt="Slide Icon"
+                    buttonLabel="Learn more &amp; download"
+                    header="Evangelize Design System with a Free Template!"
                     image={deck}
                     link="https://www.uxpin.com/evangelizing-design-system-roi-template?utm_source=adele.uxpin.com&utm_medium=upartner&utm_campaign=Adele"
+                    text="40+ Slides ready for action. Perfect for team and stakeholder presentation.
+                      Available as a powerpoint and keynote deck."
                   />
                   <UXPinPromo
-                    header="UXPin: Prototype and Manage Your Design System"
-                    text="Join thousands of companies (including PayPal, Sapient and HBO)
-                    and optimize your design process with UXPin."
-                    buttonLabel="Start a free trial now!"
                     alt="Prototyping Icon"
+                    buttonLabel="Start a free trial now!"
+                    header="UXPin: Prototype and Manage Your Design System"
                     image={prototyping}
                     link="https://www.uxpin.com?utm_source=adele.uxpin.com&utm_medium=upartner&utm_campaign=Adele"
+                    text="Join thousands of companies (including PayPal, Sapient and HBO)
+                    and optimize your design process with UXPin."
                   />
                 </StyledTwoColumns>
               </InfoContainer>

diff --git a/src/containers/detailsPage/data-row.jsx b/src/containers/detailsPage/data-row.jsx
@@ -9,6 +9,7 @@ function IconYes() {
     </svg>
   );
 }
+
 function IconNo() {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" className="table-icon" viewBox="0 0 3.06 3.06">

diff --git a/src/containers/detailsPage/details-page.jsx b/src/containers/detailsPage/details-page.jsx
@@ -94,6 +94,7 @@ export default function DetailsPage() {
 
   const header = `what does ${data.company.data}'s design system include?`;
   const breadcrumbs = `/ ${data.company.data}'s ${data.system.data}`;
+
   return (
     <Container>
       <StyledHeaderContainer id="header">