fix: color contrast a11y (#133)

[karthik1802]

TSv2 Issue #135

Decouple border and text color of TemplateButton

Changes

• Made changes in TemplateActions.js
  • Removed color from props in AddToContractBtn
  • Added new props(colorBorder, colorButton) in AddToContractBtn

[jolanglinais]

Also can you link to the issue @Michael-Grover made about this?

[karthik1802]

@irmerk @Michael-Grover I made the above changes

[jolanglinais]

Sorry, my changes were actually wrong. I adjusted a bit:

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Icon } from 'semantic-ui-react';

const ActionsContainer = styled.div`
  padding: 0 !important;
  background-color: ${props => props.color || '#F9F9F9'} !important;
  max-height: 30px;
`;

const TemplateBtn = styled.a`
  padding: 5px 10px;
  display: inline-block;
  color: ${props => props.color || '#484848'};
  font-family: "IBM Plex Sans";
  font-size: 0.75em;
  font-weight: bold;
`;

const AddToContractBtn = styled(TemplateBtn)`
  width: 60%;
  border-right: 1px solid ${props => props.borderColor || '#E1E5EB'}; 
  cursor: pointer;
  &:hover {
    color: #3087CB;
  }
`;

const DetailsBtn = styled(TemplateBtn)`
  float: right;
  width: 40%;
  font-size: 0.75em;
  font-weight: 300;
  text-align: center;
`;

/**
 * A Template Actions component that will provide each template
 * with functionality.
 */
class TemplateActions extends React.Component {
  /**
     * Render this React component
     * @return {*} the react component
  */
  render() {
    const { handleViewDetails, libraryProps } = this.props;
    console.log('libraryProps: ', libraryProps);
    return (
        <ActionsContainer color={libraryProps.ACTION_BUTTON_BG}>
        <div>
          <AddToContractBtn
            className="adToContractButton"
            color={libraryProps.ACTION_BUTTON}
            borderColor={libraryProps.ACTION_BUTTON_BORDER}
            onClick={() => this.props.addToCont(this.props.uriKey)} >
            <Icon name="plus" />
            Add to contract
          </AddToContractBtn>
          <DetailsBtn
            color={libraryProps.ACTION_BUTTON}
            onClick={() => handleViewDetails(this.props.uriKey)}>
            Details
          </DetailsBtn>
        </div>
      </ActionsContainer>
    );
  }
}

/**
 * The property types for this component
 */
TemplateActions.propTypes = {
  addToCont: PropTypes.func,
  handleViewDetails: PropTypes.func,
  uriKey: PropTypes.string,
  libraryProps: PropTypes.shape({
    ACTION_BUTTON: PropTypes.string,
    ACTION_BUTTON_BG: PropTypes.string,
    ACTION_BUTTON_BORDER: PropTypes.string,
  }),
};

export default TemplateActions;

This makes this:

[karthik1802]

@irmerk I made a small adjustment I guess this will give a similar result to #202 (comment)

[jolanglinais]

  background-color: ${props => props.color || '#F9F9F9'} !important;

[jolanglinais]

  color: ${props => props.color || '#484848'};

[jolanglinais]

  border-right: 1px solid ${props => props.borderColor || '#E1E5EB'}; 

[jolanglinais]

            color={libraryProps.ACTION_BUTTON}
            borderColor={libraryProps.ACTION_BUTTON_BORDER}

[jolanglinais]

I think you may have been on the right track in the beginning.

[karthik1802]

hey!! sorry something came up couldn't reply, but in 79ea0ad I did the same(as in the second changes requested by you)

[jolanglinais]

I think the changes I suggested since then should be the ones put in place here.

[jolanglinais]

@akay1802 any progress on this?

[jolanglinais]

Closing as stale, feel free to come back to it @akay1802!