LORIS UI - PORTFOLIO

This is the first in a series of react component libraries. The "portfolio" library has been designed initially with the neilgeorgephotography project in mind, to showcase beautiful photography, but could work equally well for other sites of a similar type.

As with all Loris component libraries, the components are themable. To achieve this, you musts wrap your route component (or wherever you intend to be using the components) in a Loris Themer component, which the library exports. The component accepts a theme prop, which is an object, to which you can pass all of your custom values. To see exactly how your custom theme object should be structured, take a look at the /src/library/00-protons/Themer/defaultTheme.js file. Write your own values at any key name/location that you see in this object to overwrite what's in the default. For example, with a typical implementation, your index.js file might look something like this:

// index.js

import React from 'react'
import { render } from 'react-dom'
import './index.scss'

import App from './App'
import { Themer } from './library'

import * as serviceWorker from './serviceWorker'

render(
  <Themer theme={{
    colors: {
      main: "#6CA4C8",
      secondary: "#B88A9F",
      secondary_light: "rgba(184, 138, 159, .12)",
      dark: "#121F1F",
      grey: "#F9F8F7",
      light: "#FFFFFF"
    }
  }}>
    <App />
  </Themer>, document.getElementById('root'))

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister()

Of course, if your custom theme was starting to get long, you could break it out into its own file and import it here instead, as long as the object gets passed to the theme prop, you're all good.

For more granular control, you can pass a scopedStyles prop to any loris component. So if a component had been setup to use backgroundColor: colors.main, even though you've set your own "main" colour, you might want that component to use your secondary color for its background. It would look something like this:

// the below code assumes that you are consuming the
// theme context earlier in this same file and assigning
// it to the variable `theme`

<Card scopedStyles={
  backgroundColor: theme.colors.secondary
} />

Components

Below are all the components in this library, including a brief description and a list of props that can be passed

01-atoms/CoverImage

Renders an image that fills its container using object-fit. The object-fit-polyfill library is a dependency of this library for use in this component.

Props:

• coverImageId [String]: a unique id for the component,
• imageAlt [String]: the text for the image HTML alt attribute,
• imageId [String]: a unique id for the image,
• imagePlaceholderSrc [String]: filepath to the placeholder image that will be displayed until the image loads,
• imagePos [Object]: keys x and y to be used as the object-position value,
• imageSize [Object]: keys width and height to be used to sest the dimensions of the image,
• imageSrc [String]: filepath to the image to be rendered

01-atoms/Heading

Displays a simple text heading with some pre-defined styles.

Props:

• color [String]: one of the theme colors, sets the color of the heading text,
• headingLevel [Number]: between 1 - 6 inclusive, sets the <h_> tag for the heading,
• headingText [String]: the text to be rendered for the heading

01-atoms/Icon

Displays an svg graphic. Can optionally be a link.

Props:

• name [String]: the name of the svg, used as the img alt text
• size [String]: a predefined size string, sets the size of the svg,
• src [String]: a filepath that points to an svg file,
• url [String]: path to an internal or external resource. If supplied, the svg is wrapped in an anchor tag

01-atoms/ImageLoader

Similar to CoverImage but with the difference that this image will retain its aspect ratio. No object-fit properties are used, so the image will simply render at the specified size and is not guarunteed to fill its container.

Props:

• imageAlt [String]: text to be used as the value for the image alt attribute,
• imageId [String]: a unique for the image,
• imageSrc [String]: a filepath to the image,
• placeholderImageSrc [String]: a file path to the placeholder image that will be displayed until the intended image has loaded

01-atoms/LinkButton

A text link to an internal or external resource. It is styled to look like a button component.

Props:

• buttonBlock [Boolean]: determines whether or not the button should fill its container's width,
• buttonBorderColor [String]: sets the color of the border,
• buttonBgColor [String]: sets the color of the background, this should typically be the same as the border color,
• buttonColor [String]: sets the color of the button's text content,
• buttonLarge [Boolean]: determines which size variation of the button should be used,
• buttonLink [String]: a url that the button redirects to,
• buttonLinkVariation [String]: either internal or external, determines if an or tag is used,
• buttonOutline [Boolean]: determines whether or not the button should have a color fill,
• buttonText [String]: the text contents of the button

01-atoms/RichText

A simple container component that renders children with some defined styles.

01-atoms/Title

A text component for rendering a heading with a stylised underline.

Props:

• titleLevel [Number]: between 1 - 6 inclusive, determines the <h_> tag that is to be used,
• titleText [String]: the text that is to be displayed,
• underlineColor [String]: a theme color name that the title underline should use

02-molecules/ButtonRow

A component for rendering multiple buttons. The buttons are displayed side by side with a central line that runs across the screen and connects the buttons together. This line also helps differentiate between different sections of a page.

Props:

• buttons [Array]: each array item should be an object containing the non-color related props of a button,
• rowColor [String]: a theme color name that will be used to style the connecting line, and the buttons thereon,
• rowWidth [String]: either narrow or very-narrow, determines how wide the buttons container should be

02-molecules/Card

A flexible component that renders a heading, sub-heading and then any other children that are set.

Props:

• backgroundColor [String]: a theme color name that determines the background color of the button,
• borderColor [String]: a theme color name that determines sthe border color, should normally be the same as the background color,
• cardHeading [String]: the text for the main card heading,
• cardSubHeading [String]: the text for the card subheading

02-molecules/Footer

A simple container for some typically footer content: an accreditation for the site builder, a simple site map and a list of social media icons

Props:

• accreditationLink [String]: url relevant to the accreditation text,
• accreditationText [String]: text to be displayed, could be an affiliated organisation or the developer etc,
• iconsListData [Array]: each item should be an object with all of the props for an Icon component (see 01-atoms/Icon),
• siteMapLinks [Array]: each item should have path and label keys

02-molecules/HeroGallery

This is an image gallery designed for the hero section of the website. It displays full screen images and tranistions between them with a subtle cross-fade animation.

Props:

• gallerySize [Object]: keys width and height, default to 100% and 100vh respectively,
• images [Array]: each object in the array should contain the props for an individual image

02-molecules/IconsList

Displays multiple svg icons. Can be configured as a row or column.

Props:

• direction [String]: one of column, row, column-reverse or row-reverse, determines the arrangement of the icons
• icons [Array]: each object in the array should contain the props for an Icon component

02-molecules/MainNav

The top bar that sits on every page of the website, including the main menu.

Props:

• menuLinks [Array]: each object in the array should have keys path and label,
• siteLogo [String]: optional filepath to a logo image,
• siteTitle [String]: the title of the site/web app

02-molecules/PageNav

A secondary level navigation for navigating within a page

Props:

• linkHighlight [String]: name of one of the theme colors, to style the underline of an hover/active link,
• links [Array]: each object in the array should have keys path and label

02-molecules/SideNav

A secondary level navigation that sits at the side of a page.

Props:

• direction [String]: one of column, row, column-reverse, row-reverse,
• linkColor [String]: the color that the links will display in,
• menuItems [Array]: each object in the array should have keys path and label

02-molecules/StaticGallery

A section for rendering a collection of images. Includes a side nav and a title.

Props:

• images [Array]: each object in the array should contain the props for an image,
• titleText [String]: The title for the image section,
• titleLevel [Number]: between 1 - 6 inclusive, determines the <h_> to be used for the title,
• underlineColor [String]: one of the theme color names, determines the color of the title underline

02-molecules/TextSection

Section for rendering a heading with text children. Some pre-defined styles are supplied.

Props:

• titleLevel [Number]: between 1 - 6 inclusive, determines the level of <h_> that should render the title,
• titleText [String]: the text for the section title,
• underlineColor [String]: one of the theme color names, determines the color of the title underline.

03-organisms/CardBlock

Component renders a selection of cards in rows. Cards as passed as children.

Props:

• backgroundColor [String]: name of one of the theme colors, sets the background of the section,
• loadingImage [String]: filepath to an image to be rendered is there are no events to dispaly/events are loading,
• rowContains [Number]: between 1 - 4 inclusive, determines how many cards should fit in a row before they break onto a second line

03-organisms/GalleryFull

A full page gallery component. This renders a collection of images in a horizontal, scrollable container. Clicking one of the images loads it into the large, focus-image area below.

Props:

• galleryColor [String]: one of the theme color names, determines the color that will be used across various aspects of the component,
• images [Array]: each object in the array should contain the props for an image

03-organisms/Page

Page components wrap app content and display a consistent navigation and footer. The props are listed below, but not detailed since they would be repeats on component detailed above.

Props:

• accreditationLink [String],
• accreditationText [String],
• iconsListData [Object],
• menuLinks [Array],
• siteLogo [String],
• siteMapLinks [Array],
• siteTitle [String]

Additionally, every component in the library can accept an additionalClasses component, for passing down extra class names that are rendered on the component's root DOM node.