x-team / xp-ui

UI component library for the X-Platform

XP UI

UI component library for the XP platform.

Requirements

You need to install:

• nvm

Get started

• nvm use v9.3.0
• npm install
• npm start

Live preview

• The latest Storybook spec page built out of master branch is available for preview here
• The latest Storybook spec page built out of develop branch is available for preview here

Styleguide

Contributing

Read design principles to get an understanding of the principles we're aiming for.

xp-ui's Issues

Make ErrorBox more readable

Currently ErrorBox looks like this:

We can make some changes to improve readability:

• lighten the background so there's more contrast between text and bg
• remove italic style

Upgrade dependencies

snapguidist PR was merged, and I notice a few other deps are out of date as well

▻ npm outdated
Package                 Current  Wanted  Latest  Location
babel-eslint              7.2.3   7.2.3   8.0.2  auto-ui
color                     2.0.0   2.0.1   2.0.1  auto-ui
eslint-plugin-flowtype   2.35.0  2.39.1  2.39.1  auto-ui
eslint-plugin-react       7.3.0   7.4.0   7.4.0  auto-ui
flow-bin                 0.53.1  0.53.1  0.59.0  auto-ui
jest                     20.0.4  20.0.4  21.2.1  auto-ui
react                    15.6.1  15.6.2  16.1.1  auto-ui
react-dom                15.6.1  15.6.2  16.1.1  auto-ui
react-styleguidist       6.0.21  6.0.33  6.0.33  auto-ui
snapguidist               2.0.1   2.1.1   2.1.1  auto-ui
url-loader                0.5.9   0.5.9   0.6.2  auto-ui
webpack                   3.5.5   3.8.1   3.8.1  auto-ui

FooterBrands component

Epic https://github.com/x-team/auto/issues/573

---

Create new component.

Props

brands: [
  {
    title: string,
    image: string,
    url: string,
  }
]

Behaviour

None specific behaviour.

Review typography

Now that many of the components are in place, we need to do a review of the sketch file and ensure we are using the correct font faces / sizes / spacing.

Footer component

Epic https://github.com/x-team/auto/issues/573

---

Create new component.

Dependencies

• FooterList component #23
• FooterBrands component #24
• HorizontalRuler component #21

Props

children: node|array,

Behaviour

As pointed out in https://github.com/x-team/auto/issues/573

Please include the footer from x-team.com, available via the x-team-com-new repo (templates/footer.js). Request access from @joshwnj if you don't have access to that repo.

• children should get FooterList and FooterBrands

Example usage:

<Footer>
  <FooterList title="list one" items={list1} />
  <FooterList title="list two" items={list2} />
  <FooterList title="list tree" items={list3} />
  <FooterList title="list four" items={list4} />
  <FooterBrands brands={listOfBrands} />
</Footer>

Adjust styles of components

According to the Sketch designs, fine tune styles of the following components to match designs:

• Text, mainly fix divider position and flexibility of usage, and also set correct spacing
• Button, mainly center align text (is required on auto when defining custom min-width for buttons)

FilterBar component

Create FilterBar component

Usage

<FilterBar onSubmit={handleSubmit}>
  <InputField />
  <AnythingElse />
</FilterBar>

Behaviour

• FieldBar contains a form that submit results using onSubmit prop function
• Childrens are expected to be inputs, but can be anything

Alter Roadmap + Next Steps mobile header

Make it look like this so it's better proportioned and centered:

Applicant's avatar is flickering

When used in combination with buttons, ApplicantBadge component looks odd in a way that avatar images flicker when the buttons do appear. The fix is to set image height (we generate 64px height gravatar images) and remove extra top padding from the component text content.

Restructure components

Given the growing nature of out components and their logical types, I propose configuring Styleguidist to showcase components grouped by their meaning. That would simplify user's navigation over the components kit and make it cleaner from the folder structure's prospective.

Roadmap from auto-ui does not import propperly

Currently auto-ui repo has a component named Roadmap. This component is being imported to the auto repo to be used in the applicants journey towards getting hired. By importing it and using it fails to be rendered, this way:

import { Roadmap, RoadmapLevel } from 'auto-ui'
(...)
<Roadmap>
    <RoadmapLevel>
    </RoadmapLevel>
</Roadmap>

We can see that if we removed Roadmap component and just use its children those components do get rendered. The error got is the following

Add Checkbox Style to InputField

x-team/auto#748 uses a checkbox input. If you try to use a checkbox with InputField its renders like

Update X-Roadmap image

According to Sketch design, Roadmap page contains an image different to the one we use at the moment. Let's update that.

Make ColorPalette component reusable

This is kinda an improvement over this PR #67

Currently ColorPalette component's task is just to showcase existing colors which is kinda limited and might be extended to serve auto project's purposes. Given that auto still contains some UI parts, we might need to support that and ideally, we'd like to reuse color variables defined in the aforementioned auto-ui PR. So I suggest exporting those variables from the component so that when imported into auto we can just re-use them and stay consistent in terms of UI styling.

Text component

Epic https://github.com/x-team/auto/issues/573

---

Create new component to render typographic content.

Props

[TBD]

Behaviour

This component contain all variation of styles for typography blocks (TBD on props).

Adjust UI components styles

The goal is to fine tune components styles to conform to designs. Also good opportunity to optimise markup in some places and remove dead code.

Todo

• Remove redundant markup
• Remove dead code
• Improve component styling

SolutionForm is missing prop function to execute when submitting

Description

Currently the component SolutionForm is submitting the solution provided as GET /currentpath?solution={textareaContent}, where solution is the name of the text area.

How

Modify the current component in order to receive a function as props and pass it to the form to be able to submit the form accordingly.

Update RoadmapHero component to use flexbox

We'll have a much easier time using flexbox for layout, especially across breakpoints.

If we can't fit on a single row let's horizontally center:

Deploy Styleguidist to GH-pages

Deploy Styleguidist bundle to GH-pages.

Suggested approaches:

• https://www.npmjs.com/package/gh-pages-deploy
• https://www.npmjs.com/package/gh-deploy
• https://github.com/x-team/unleash-styles/blob/master/deploy-ghpages.sh (note that on unleash-styles, each PR will get a temporary instance on heroku with that branch build of styleguidist, and a "View deployment" link will appear on PR page, in merging details section, this is also nice feature to have)

Solution form is missing on exports

Type of release: Fix.

Export SolutionForm component.

Headbar component

Epic https://github.com/x-team/auto/issues/573

---

Create new component or migrate https://github.com/x-team/auto/blob/master/src/client/components/XHeader.js and upgrade styles and render.

Behaviour

• "Sticky header", fixed on scroll

RoadmapTimelineElement Component

Represents the single step from the timeline.

done: false

done: true

Props

isDone: boolean

Done

Recognizes for the element state

I had to revert the prop-types change, it broke the build

Hey @joshwnj, fyi: I reverted my last change, it broke the build in x-team/auto.

425653d

FooterList component

Epic https://github.com/x-team/auto/issues/573

---

Create new component.

Props

title: string,
items: [
  {
    label: string,
    url: string,
  }
]

Behaviour

None specific behaviour.

Paint textarea in red when error happens for SolutionForm

Description

Currently the textarea in SolutionForm is shown gray (the same) when an error happens, staying the same color as before, being inconsistent with current https://join.x-team.com/applicant/:token/submit solution.

How

Paint the textarea borders in red, and shadow the background in a lighter gray this way:

Textarea component

Create new UI component: Textarea

Preview

Props

placeholder: string
children: node
onChange: function
onFocus: function
onUnfocus: function
charLimit: number (default to 1000)

Behaviour

• The Textarea component should be based on https://github.com/ngs/draft-js-markdown-shortcuts-plugin (need trial with that)
• When Textarea changes, trigger action from container given on onChange
• When Textarea gain focus, trigger action from container given on onFocus
• When Textarea loses focus, trigger action from container given on onUnfocus
• Textarea should limit the characters to 1000 (variations can be set by charLimit)
• The character counter should appear when textarea is focused

Extract form-related components from auto

The task is to abstract form components into self-contained isolated UI components, so that we move all the routines and styles over to a central place for easier reuse and composition in other Auto projects.

New Components

• - InputField — To represent a single input of the following types: 'checkbox' | 'color' | 'date' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'radio' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url' | 'week'
• - InputGroup — To represent a grouped components consisting of a static label and input component.

Roadmap component

Epic https://github.com/x-team/auto/issues/573

---

Create new component.

Dependencies

• RoadmapLevel component #8
• RoadmapTimelineElement component #10
• Copy component #12
• SvgIcon component #15
• Button component #14

Props

children: node|array,

Behaviour

This component is the layout styles wrapper for Roadmap, the children prop should be the render itself, receiving RoadmapLevel, RoadmapTimelineElement, etc.

Example usage:

<Roadmap>
  <RoadmapLevel icon="icon-id" heading="lorem ipsum 1" level=1 body={body1Content} isActive />
  <RoadmapLevel icon="icon-id" heading="lorem ipsum 2" level=2 body={body2Content} />
  <RoadmapLevel icon="icon-id" heading="lorem ipsum 3" level=3 body={body3Content} />
  <RoadmapLevel icon="icon-id" heading="lorem ipsum 4" level=4 body={body4Content} />
  <RoadmapLevel icon="icon-id" heading="lorem ipsum 5" level=5 body={body5Content} />
  <RoadmapLevel icon="icon-id" heading="lorem ipsum 6" level=6 body={body6Content} />
  <RoadmapLevel icon="icon-id" heading="lorem ipsum 7" level=7 body={body7Content} />
</Roadmap>

Upgrade PageTitle

Upgrade the PageTitle component to match the new designs:

Graphic component

Epic https://github.com/x-team/auto/issues/573

---

Create new component to render graphics.

Props

id: string,
className: object,

Behaviour

Graphics can be styled in many different ways in the page, this component is not meant to provide layout options for the graphic. It main purpose is to encapsulate defaults <img> and <svg> HTML tags and centralize it's behaviours.

• It should accept ...props and pass it to the html tag (the availables for <img> and <svg>)
• if id is invalid, render null
• (optional) create 404 render for onError event, accepted by <img> tag
• this component stores all the images available in the UI set, for layout purposes, not content. the id will map to the correct render.

CollapsibleSection component upgrade

Epic https://github.com/x-team/auto/issues/573

---

Change styles to:

Use the responsive footer from x-team.com

The footer should be applied to the first & last pages of redesigned auto.

ApplicantBadge update

Counterpart to https://github.com/x-team/auto/issues/717

Wipe out footer links on medium screen

A complementary task for this bug https://github.com/x-team/auto/issues/831

Button component

Epic https://github.com/x-team/auto/issues/573

---

Migrate https://github.com/x-team/auto/blob/master/src/client/components/Button.js and upgrade styles.

Add Calendar Icon

x-team/auto#748 uses a calendar icon for date input. Add a calendar to the SvgIcon component

Allow children in ApplicantBadge

ApplicantBadge should allow children so we can compose with additional info or buttons.

AttachFiles component

Create new component: AttachFiles

Preview

Props

files: [
  {
    filename: string,
    path: string,
    progress: number
  }
]
onUpload: function
onCancel: function
onDelete: function

Behaviour

• the "Attach a File" button opens the standard file picker dialog
• files that are uploading show a progress bar, and can be canceled (with confirmation)
• files that have finished uploading can be deleted (with confirmation)

RoadmapLevel component

Represents a single "level" in the roadmap screen.

Props

icon: url
heading: string
level: number
body: string
isActive: boolean

Behaviour

When isActive flag is set, use a highlighted border:

Change 'Show off' form screen

Mobile view: Instead of 15px padding on the left/right, increase to 20px padding. (On this div: AutoUI_ui_MilestonesScreen-25)

RoadmapHero Component

Represents the hero image and content on the roadmap screen.

Props

heading: string
content: string
heroUrl: string

X-Team logo lacks some spacing inside Footer component

When injected into the template, x-team logo in the footer doesn't have room on the left hand side and sticks to the left viewport border.

Sketch:

Needs to be fixed.

Provide further coverage of style values using variables

Provide further coverage of style values using variables on https://github.com/x-team/auto-ui/tree/master/src/styles

VideoPlayer component

Epic https://github.com/x-team/auto/issues/573

---

Migrate https://github.com/x-team/auto/blob/master/src/client/components/VideoPlayer.js and upgrade styles.

SvgIcon component

Epic https://github.com/x-team/auto/issues/573

---

Create new component.

Because https://github.com/x-team/auto/blob/master/src/client/components/Icon.js is a font-icon based component (https://github.com/x-team/auto/blob/master/src/client/styles/components/_icon.scss), I'd recommend to migrate it in another task if needed. For this task would be preferred to create an SVG based component.

Props

icon: string,

Behaviour

• icon gets a string that maps to different SVG renders

HorizontalRuler component

Epic https://github.com/x-team/auto/issues/573

---

Create new component.

Behaviour

Yeah, ya know, for style consistency, create a component that wraps all <hr/> usages (even if uses different render of the <hr/> tag, the semantics is what counts). Also, this component should rely on margins/paddings to give the desired harmony for horizontal spacing in content compositions.

New Text component's representation option

In order to enforce consistent styling of different labels in Auto app, I noticed missing option to render Text component (which contains all the required text styles) as a pure kinda label for some parts of Auto screens. To resolve that, I took a possibility to extend the component in question with a boolean prop to render just a value with any wrapping containers. That allows eliminating several redundant styles from the Auto project.

Milestones component

Epic https://github.com/x-team/auto/issues/573

---

Create new component:

Dependencies

• SvgIcon component #15

Props

level: number,
levels: [
  {
    label: string,
    icon: string,
    handleClick: function,
   }
],

Behaviour

• level defaults to 1
• level dots are clickable and trigger handleClick
• (optional) handleClick are triggered after animation transition
• levels[i].label prop is optional, defaults to the string Level ${i}

Alter 'Milestones' component

This complements https://github.com/x-team/auto/pull/658 PR based on the comment

Create applicants list filter component

Create ApplicantListFilter component.

This component will have 3 checkboxes which will express the filtering of an applicants lists from their current status as it shows in this wireframe.