hack4impact-uiuc / bridge Goto Github PK

https://github.com/Flet/github-slugger

Epic: #15
create a utility and file structure to map markdown files to the component/design documentation

So you have a list of components, which will be listed on the Sidebar (#5):

• Button
• Alert
• Text
• ....

Each Component has details on what it does/how to use it etc... This should be in a markdown file - probably like:

- content
   - design
       - typography
       - colors
       - spacing
       - .... 
   - components
       - Button
       - Alert
       - Link
       - .... 

A sidebar may have different sections, etc - do something like this https://github.com/primer/components/blob/master/docs/src/%40primer/gatsby-theme-doctocat/nav.yml

Either we can use mdx, gatsby or whatever...

<Table>
   <Row fontSize="12px">
        doesnt work
   </Row>
</Table>

fonts still stay 18px

• what about text alignment?

there's probably some that i missed and overlooked but here are my initial thoughts. A

There are multiple types of form layouts.. we'll focus on vertical ones. Within vertical forms, you need to account for either

1. 
Label Name [ your choice of input ] 

2. 
Label Name
[ your choise of input ] 

The design system spec only accounts for the 2nd choice. We should add the 1st choice as well.

inline forms (e.g. two text inputs side by side) can be done with Flexbox by dev

Components

• just include top parent form level styling like typography
• <Form.Item> an item that includes a label name and the input
• <Form.Label> the label for the Form Item
• <Form.Text> helper text (below input)

<Form.Item />

props

• row: bool - if true, this would choose choice 1, defaults to choice 2
• disabled? idk how you would put disabled props into children
• required? idk how you would put disabled props
• optional? idk how you would put disabled props

<Form.Label/>

• for - the id of the input (look at reactstrap)
• required
• optional

<Form.Text>

props

• color

Example

<Form>
    <Form.Item row>
       <Form.Label required> Favorite Color </Form.Label>
       <TextArea />
       <Form.Text>some description </Form.Text>
    </Form.Item>
     // inline
   <Flex>
        <Box flex={1}>
           <Form.Label required> Favorite Car </Form.Label>
           <Dropownd asdfasdf />
           <Form.Text>some description </Form.Text>
        </Box>
        <Box flex={1}>
           <Form.Label required> Favorite shoe </Form.Label>
           <TextField />
           <Form.Text>some description </Form.Text>
        </Box>
   <Flex>
   <Form.Item>
       <Button>Submit</Button>
   <Form.Item>
</Form>

currently Icon only supports our icons

<Icon viewBox="0 0 32 32">
    < path asdfjasldkfjklasjdlkfjalsdjfklajsdf />
</Icon>

tags font size should be 12px, line height 16 px, letterspacing 0.3 px

Follow this:

related to #22

https://mdxjs.com/guides/syntax-highlighting

I think just changing where the link will be would be sufficient enough.

props

• href

• styling - underline during hover
• tag with href

Design System Link

Should include other Components:

• Card.Image
• Card.Title
• Card.Subtitle
• Card.Body

Design System Link

• remember about form validation props
• checkboxes allow for multiple options checked

components

• <Checkbox> - a radio input. for a radio input, with Blue as the description, do <Checkbox>Blue</Checkbox> (would follow https://ant.design/components/radio/)
• <Checkbox.Group> - a vertical group?

Props

• disabled
• error (this could be in Group and per Checkbox)

Pretty similar to Radios #52

Let me know if you need the icons - im not sure if you need the svg or not

<Alert variant="error" mb="8px">
        <Icon type="errorAlert" />
        Error! Logs will be <Link href="#">here</Link>!
    </Alert>

or

<Alert variant="error" mb="8px">
        Error! Logs will be <Link href="#">{" "}here</Link>!
    </Alert>

doesnt add a space in between text. It doesn't work with a vanilla a tag either.

Use this https://github.com/react-figma/react-figma?
or this? https://github.com/airbnb/react-sketchapp

Currently <Link/> is a tertiary button, move that over to <Button />

components, structure, etc in README of /docs

props

- type
   - body, hero, overline, caption, tables

Should also respect as

Design System Link

• TextField
• TextField.Label

Props

• required: required, optional
• helperText: str
• autoComplete
• aria-label
• placeholder
• icon?

more?

Design System Link

need to ensure styling matches with <thead>, <tr>, <th>, <td>.. not sure whether they sure inherit whatever the font the table is in?

Props

• type: primary, borderless, zebra

An issue to hold a list of potential components. We have a list of initial components from the design system but there are more to be added, especially with grid or just helping with hard to do components. We already have a Flex box container but think of more abstractions like sidebars, row, etc... Look at other component libraries for inspiration too!

Feel free to comment to add more.. I will cross out and link the issue once we decide to go forward with a component on this list.

• Navbar
• Timeline
• Toolkit
• Flex Row
• Sidebar
• Form Grid?

Grid Components
#89

• Row
• Columns
  Example

• following primer
• seems like we need COLOR in everything anyways
• change up some documentation in the website to reflect this change

I'm not sure if we should do this.. it's fairly complicated and idk if it's worth doing for the amount of effort vs how many people will use this

Could use https://react-dropzone.js.org/#dropzone (look at stying with styled-components) but here are some concerns:

• what are the implications of adding another library?
• I dont think we can do the progress bars, we could make progress bars into a different component? maybe?

some theme attributes like letterSpacings are defined as a scalar array. Then, each value is mapped to a key... but it would make sense not to initially represent it in an array

Design System Link

remember about form validation...

components

• <Radio> - a radio input. for a radio input, with Blue as the description, do <Radio>Blue</Radio> (would follow https://ant.design/components/radio/)
• <Radio.Group> - a vertical group?

Props

• disabled
• error (this could be in Group and per Checkbox)

get is a HOC over themeGet provided by styled-system... themeGet has the API of

themeGet(objectPath, fallbackValue)(props)

it takes props as a value and gets props.theme...

get just defaults with the default theme...

However, with the way we've been using it outside styled-components (not tagged template literal) and in object literal syntax, it will always fallback the default theme ignoring the passed theme, if it exists...

So, we should

1. test components changing styles for passed themes via props ( does that automatically if one would use it so we don't have to worry about that)
2. in any object literal syntax not styled.div or whatever do get(key)(props) where props.theme is the theme... However, we've been converting the theme passed in as props as propTheme since it conflicts with the default theme we import in components... Thus, we should alias default theme we import in as defaultTheme (since we use it once) -

import {default as defaultTheme} from '../theme'

then whenever we deconstruct props for the component, we leave it as theme, instead of aliasing it to propTheme as such:

const Button = ({theme, ...props}){
}

// instead of ({theme: propTheme, ...props})

just a little off rn

epic for forms, since there's a lot

• Text Field #32
• Text Area #33
• Radio Buttons #52
• Checkboxes #53
• Dropdown #44
• file upload #54 - not sure if we should do
• Form - #55

Each component will need to have an error prop

Banner

Title: Bridge
Hero: A flexible but simple design system
Smaller: Design & Build with Hack4Impact UIUC Design System

Then below → Lead User to clicking either Design or Components pages

woops british and american english haha. We'll stick with grey. But it's inconsistent in theme.js

Eventually, this would be redirected from uiuc.hack4impact.org/design

I'm imaging something like the Github' Primer or Shopify's polaris. You would have two main sections:

1. Design System Documentation on Principles, colors, etc (/design)
2. React Component Documentation (/components)

Both will have a sidebar of elements and clicking them will go to a page with more detail on that subject.

Content

Content will be taken from a markdown file for ease of documentation creation and maintenance.

Design System

Example:

Components

There's a ton of examples of react component library documentation.

Github Primer Components

Reactstrap

Design System Link

Example:

alerts should have all the color variants

in index.t.ds for better library usage experience

Design System Link

• TextArea

Props

• required: required, optional
• helperText: str
• autoComplete
• aria-label
• placeholder
• icon?

more?

#32 sister component

• to set up flex boxes
• use @primer/components

• implications on customizability of making proptype of the color prop be only from the list of ["primary", "secondary", "success", "error" .....]? Will the user be able to override that?

use rollup to include them in the bundle?

Design System Link

Heading component that matches h1 styling

props

- type
    - h1, h2, h3, h4

Should also respect as

mdx components that map to elements in markdown

Epic: #15

• use actual npm package @hack4impact-uiuc/design
• Add sidebar that would list all the different components in the library

We'll do a simple dropdown for now (no complex things for like header,
within dropdown - we let user do that on their own if they want... we wont provide the api for that)

props

• isOpen
• toggle
• closeOnOutsideClick
• direction (direction dropdown will pop out of)

Behavior

• unless overrided by prop, when user clicks outside dropdown, it should close dropdown

<Dropdown.Item> Render children

use Box but this is to provide the margins between Buttons

for the do’s and donts in documentation

• for Text or whatever

• use same navbar as website
• Logo to the left
• Design, Components, About Tabs
• Tabs should collapse to a hamburger menu
  • make sure Sidebar gets included with hamburger menu if small

Grid and Box components - take from primer/components

Design System Link

I'm not exactly sure how to name these color variants since we have success, error, warning stuff with buttons. Maybe just the name of the color itself? green, blue, red... and then have another prop for "light", "primary", "dark"

Using Storybook to hot reload components during development

Polaris does this well https://github.com/Shopify/polaris-react/blob/master/.storybook/main.js

• will need to check with Chloe
• seems like bootstrap cards have width 318px