palmetto / palmetto-components Goto Github PK

View Code? Open in Web Editor NEW

27.0 32.0 5.0 11.29 MB

A React component library to power all Palmetto UI.

Home Page: https://ux.palmetto.com

License: MIT License

HTML 0.02% JavaScript 8.21% TypeScript 43.12% SCSS 10.06% MDX 38.59%

design-system components react

palmetto-components's Introduction

Palmetto Component Library

A React component library to power all Palmetto UI

Quick Start

1. Install

yarn add @palmetto/palmetto-components

2. Import Global CSS

@import '@palmetto/palmetto-components/dist/css/utilities.css'; // Utility classes -- REQUIRED
@import '@palmetto/palmetto-components/dist/css/variables.css'; // CSS Variables -- REQUIRED
@import '@palmetto/palmetto-components/dist/css/index.css'; // Component CSS -- REQUIRED
@import '@palmetto/palmetto-components/dist/css/fonts.css'; // Included Font files -- OPTIONAL BUT ENCOURAGED

We recommend importing our global reset in order to maintain a consistent look of all components across applications.

@import '@palmetto/palmetto-components/dist/css/reset.css' // A Basic CSS Reset -- OPTIONAL BUT ENCOURAGED.

3. Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@palmetto/palmetto-components';

function App() {
  return <Button>Hello World</Button>;
}

ReactDOM.render(<App />, document.querySelector('#app'));

Documentation

SEE FULL DOCS HERE

Contributing

Issues and PRs welcome! See HERE for our Contribution Guide.

Raising an Issue

When raising an issue:

Make sure the issue hasn't been raised yet.
Tag issue accordingly using your best judgement. Do NOT create new tags. If you feel a new one is needed, raise it in your issue.
If your issue is a bug, include screenshots or animated GIFs in your issue whenever needed (if issue is visual in nature).
If your issue is a bug, include steps to reproduce, or link to reproducible issue, e.g.: Code Sandbox or similar. Please also provide any additional details including device, OS, browser, browser version etc.

Issues can be raised here.

License

This project is licensed under the terms of the MIT license.

palmetto-components's People

Contributors

Stargazers

Watchers

Forkers

kreo taylorhummon janogarcia bernz322 maniek157

palmetto-components's Issues

Update Storybook to 6.0.2

This is a major update, and updates several dependencies. Build should be stable before we attempt.

setupTest is not applying packages globally

make this unecessary https://github.com/palmetto/palmetto-components/blob/develop/src/components/SelectInput/SelectInput.test.jsx#L4

Remove need for duplicate Interface + PropType declarations to generate storybook docs.

Masked inputs (using cleave) don't seem to respond to RTL fireEvent commands

When attempting to test a TextInput component that has an inputMask prop. We use the standard fireEvent.change method from react-testing-library (RTL) however, the masked input renders a Cleave.js component, which appears to not fire this event upward to the parent, resulting in a failing test. The value of the input itself, changes properly, but testing with jest it doesn't seem to catch it properly.

To replicate:

IN TextInput.test.jsWrite a test similar to 'onChange event fires callback function' but in this case pass a inputMask="phone" prop to the TextInput component. The mock onChange event will now not register firing properly.

normalize and or reset css.

We have started a reset.css file, but should we just use normalize?

https://github.com/necolas/normalize.css

CSS Architecture

PROBLEM STATEMENT
We are hoping to implement CSS architecture that enables a great development experience for both library developers and consumers.

BASIC REQUIREMENTS

[As a consumer] - Styles in the palmetto-components library should not clash with styles in my application. E.G: We should not be styling all <input> elements, just ours.
[As a consumer] -- I'd like both dark and light themes available to me, and the ability to easily switch between the two.
[As a developer] -- I'd like to write CSS easily without unknowingly introducing breaking changes to unrelated parts of the library.
[As a developer] -- I would like our styles to be scalable and provide some avenue for DRY extensibility.
[As a developer] -- I would like changes to our design tokens to be propagated systemically across our components (DRY implementation)
[As a consumer] -- The component library should work for me without SASS/SCSS installed, or any kind of CSS transforms in place.

OVERVIEW OF INITIAL TECH OPTIONS BROUGHT FORTH

CSS Modules (https://github.com/css-modules/css-modules)
BEM (http://getbem.com/)
Styled Components (https://styled-components.com/)

Storybook build process broken

In order to get our global scss classes and variables available in storybook stories, we've updated the webpack config for storybook in main.js this uses sass-resources-loader to inject our global scss so it's available to all components.

While the yarn storybook command works properly and produces local storybook development build, the production build as made by yarn build-storybook command is now broken due to this same additional scss config.

Below is the logged error when we run the build process.

=> Failed to build the preview
ERR! ./src/main.scss
ERR! Module build failed (from ./node_modules/react-scripts/node_modules/mini-css-extract-plugin/dist/loader.js):
ERR! ModuleBuildError: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ERR! Error: Didn't get a result from child compiler
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/mini-css-extract-plugin/dist/loader.js:144:23
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:343:11
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:681:15
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:678:31
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1423:35
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1414:32
ERR!     at eval (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
ERR!     at runMicrotasks (<anonymous>)
ERR!     at processTicksAndRejections (internal/process/task_queues.js:97:5)
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/NormalModule.js:316:20
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/loader-runner/lib/LoaderRunner.js:367:11
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/loader-runner/lib/LoaderRunner.js:182:20
ERR!     at context.callback (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/mini-css-extract-plugin/dist/loader.js:144:14
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:343:11
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:681:15
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:678:31
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1423:35
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1414:32
ERR!  @ ./src/components/colors/Colors.stories.jsx 4:114-138
ERR!  @ ./src sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^/]*?\.stories\.jsx\/?)$
ERR!  @ ./.storybook/generated-entry.js
ERR!  @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.storybook/generated-entry.js
ERR! ./src/components/colors/colors.scss
ERR! Module build failed (from ./node_modules/react-scripts/node_modules/mini-css-extract-plugin/dist/loader.js):
ERR! ModuleBuildError: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ERR! Error: Didn't get a result from child compiler
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/mini-css-extract-plugin/dist/loader.js:144:23
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:343:11
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:681:15
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:678:31
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1423:35
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1414:32
ERR!     at eval (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
ERR!     at runMicrotasks (<anonymous>)
ERR!     at processTicksAndRejections (internal/process/task_queues.js:97:5)
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/NormalModule.js:316:20
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/loader-runner/lib/LoaderRunner.js:367:11
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/loader-runner/lib/LoaderRunner.js:182:20
ERR!     at context.callback (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/mini-css-extract-plugin/dist/loader.js:144:14
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:343:11
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:681:15
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:678:31
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1423:35
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1414:32
ERR!  @ ./src/components/colors/Colors.stories.jsx 4:138-160
ERR!  @ ./src sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^/]*?\.stories\.jsx\/?)$
ERR!  @ ./.storybook/generated-entry.js
ERR!  @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.storybook/generated-entry.js
(node:32519) UnhandledPromiseRejectionWarning: [object Object]
(node:32519) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:32519) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Button

full width prop

Radio Button Group Input

Radio button component that allows users to select a single option from a list of options.

function RadioExample() {
  const [value, setValue] = React.useState("1");
  return (
    <RadioInput
      name="size"
      title="Pick Your Size"
      description="Pick your t-shirt size"
      onChange={e => setValue(e.target.value)}
      options={[
        { value: 'chocolate', label: 'Chocolate' },
        { value: 'strawberry', label: 'Strawberry' },
        { value: 'vanilla', label: 'Vanilla' },
      ]}
      value={value}
    />
  );
}

RadioInput Props

prop	type	default value	description
name	string		name attribute that gets applied to all radios
className	string		additional classNames to add to the group
error	bool,string		render the radio group in an error state and/or display a validation message
onChange	func	undefined	callback function
title	node		text used as the title for the group of radios
description	node		help text beneath the title
options	array		the radio buttons
isRequired	bool		at least one option must be selected
value	string, number		value of the radio to be 'checked'

Radio Props

prop	type	description
name	string	name attribute that gets applied to all radios
id	string	additional classNames to add to the group
value	bool,string	value that is returned on form submission
isChecked	func	if the radio is checked
defaultIsChecked	node	initially checked if true
isDisabled	bool	disable selecting the radio
error	bool, string	render the radio in an error state and/or display a validation message
onChange	node	callback when input state changes

Input Component

We need a controlled input component. It should expose all standard input properties and events to the consumer, while maintaining a consistent aesthetic, matching this:

NOT REQUIRED BUT NICE TO HAVE FOR MVP

Input masking (for phone number format for example)

Select / Mult-select

http://www.react-select.com/

Formik Bindings

We mean to create formik bindings to all our form components so that they can be used seamlessly with formik.

Limit prop on TextInput

SelectInput component should expand to width of largest label text

When assembling the <SelectInput /> components into a horizontal layout it would be helpful if they would expand to the width of the longest option label value similar to how the html <select> element works.

Unless provided a specific width with css, they currently collapse like this:

Thanks!

FormikSelectInput is not exported

Convert repo to typescript

can use rollup plugins after #24 is merged

https://github.com/rollup/plugins (babel and typescript)
connect typescript types and proptypes: https://github.com/milesj/babel-plugin-typescript-to-proptypes

comments can be transpiled too https://github.com/milesj/babel-plugin-typescript-to-proptypes#comments-boolean

Normalize Component CSS

See #3: https://blog.newrelic.com/engineering/best-practices-shared-ui-libraries/

Article suggests normalizing at the component level, as opposed to using a global reset. This would suggest wrapping each component in a "paper" or container component which would have the styles applied to it, or using composes from CSS Modules. This way, each module has its own reset, but the consuming app can override if they choose to do so.

Get to 100% code coverage

Change typescript compile target to es6

change from esnext to es6

image component

possible component we want to copy the functionality of or just straight up use: https://github.com/stereobooster/react-ideal-image

Features

src should extrapolate to srcset (or straight up take in a srcset string[])
aspect ratio
width/height
loading state

hot reload when css/scss is updated

Improve dev ex by reloading storybook when styles are updated. currently we have to refresh browser manually

Update readme based on latest updates to build process.

Bundling revisited!

Unify build process between storybook and distrbution.

Ensure CSS bundling/minifying, etc etc.

Checkbox Component

We need a controlled checkbox component. It should expose all standard checkbox properties and events to the consumer, while maintaining a consistent aesthetic, matching this:

Tests for Formik Bindings

Add support for light/dark theming

This issue is to start the discussion on how to support light/dark theming for library users. Please post any thoughts, resources, recommendations, etc for what this implementation should look like.

Enforce kebab-case id and class Selectors

Add code coverage reports

Using CODECOV

Lint CSS Sort Order

Use the following package, or similar, to automate sorting.

https://www.npmjs.com/package/stylelint-order

Enforce Import Sort Order

@RyanMacBern suggests: "import/order": [ "error", { "groups": ["object", "builtin", "external", "internal", "parent", "sibling", "index"] } ],

Some of the Greys are a Little Green.

For e.g. --color-brand-grey-lightest

Date Input

A single component that:

allows selection of only date
allows selection of only time
allows selection of date AND time
the input matches the TextInput and SelectInput on initial appearance
mobile optimized

A common use case for this component(s) would be to allow a user to select a date and time for an appointment.

ToDo:

Determine what solution is currently being used for Logistics app.
Determine what solution is currently being used for Home app.
Determine general design concepts regarding look and layout.
Determine features/props that will be supported.

PrismJS -- Security Issue

Versions of prismJS below version 1.21.0 have a XSS vulnerability. We have this dependency due to react-syntax-highlighter which is in turn a dependency in storybook.

The storybook has an open PR to address this here: storybookjs/storybook#11838

Once that is merged we need to upgrade our storybook version to patch up the vulnerability.

Consumer styles are cascading to Palmetto components, impacting alignment

In the above example, another framework (bootstrap) is applying a margin bottom to all <label> elements. Since our <FormLabel /> does not have a margin property, it is inheriting the margin set by bootstrap.

[code style] -- refactor components with Proptypes at the top.

Components should all look like this:

const propTypes = {
  // propTypes here
};

const defaultProps = {
  // defaultProps here
};

const MyComponent = ({ propA, probB, etc...}) => {
  // your component logic and markup here.
};

MyComponent.propTypes = propTypes;
MyComponent.defaultProps = defaultProps;

export default MyComponent

Add stories for FormLabel

This isn't directly used by consumers, but we should still create stories so we can get chromatic visual regression test coverage.

storybook docs addon not displaying props

TS is Stripping Trailing "OneOfType" Types from Storybook Docs

In the following example, declaring label: React.ReactNode | string; in the interface will result in the following output in Storybook, leading the consumer to believe that the prop only accepts a node.

Allow SelectInput's selected value to be cleared

I need to be able to clear the selected value on a component that does not have multi-select enabled.

We should just be able to pass the isClearable prop through to the underlying react-select component.

Refactor CheckboxInput API to pass event back to consumer.

Improve ESLINT dev experience

Add proper lint on save when running storybook in development mode.

Run linter on build processes.

Refactor formik examples to use children instead of render prop

Render prop in Formik is being deprecated for version 2.x. See: https://formik.org/docs/migrating-v2#all-render-props-have-been-deprecated-with-a-console-warning

npm package build process

We need to add a build script that will publish our package to npm and meet the following requirements:

Expose components on an individual basis that can be imported from the library as such import { Component } from '@palmetto/palmetto-components
Expose our global scss variables and utility classes so they can be used by the consumer as such @import '~palmetto-components/utilities.scss'

Storybook viewport addon

https://github.com/storybookjs/storybook/tree/master/addons/viewport

Setup Linting for Typescript

Card

Alert

For displaying error messages, such as when a form is submitted but the api returns an error.

MVP Proposed Props

prop	type	default value	description
children	node		content of the alert
autoHideDuration	number		number of milliseconds to wait before automatically dismissing the alert
dismissible	bool	false	when true, display a close button so the alert can be dismissed
onDismiss	func		callback function called when an alert is dismissed

Post MVP

prop	type	default value	description
type	enum	info	success, warning, danger, info

Text Link

Do we assume/require react router?

Retroactively Re-organize PropTypes

We took a vote in Slack, and decided on how to organize our PropTypes. Now, we need to retroactively go back and correct existing components.

The decision was.... List required first in alphabetical order, then non-required in alphabetical order.

This ordering needs to be applied to propTypes, defaultProps, and where the props are imported into the component.

https://palmetto-team.slack.com/archives/C014E879QCX/p1595005588365300

autoprefixer

implement an autoprefixer