ocean-ds / ocean-web Goto Github PK

We need a few adjustments on Switch:

1. Add Hover state
2. Change border-width to $border-width-hairline
3. Change color tokens on Disabled states:
   Disabled On - change to background-color: $color-interface-light-down
   Disabled Off - change to border-color: $color-interface-light-down

All specs are on: https://www.figma.com/file/PgLv9k22CHHZZ867HwN65y/%E2%9D%96-Ocean-DS-Core-Components?node-id=1845%3A8828

Creates a top bar component follow this figma handoff

We need a Circular Progress Indicator component that will be used in the Primary Buttons, for example.
Follow this handoff: https://www.figma.com/file/PgLv9k22CHHZZ867HwN65y/%E2%9D%96-Ocean-DS-Core-Components?node-id=3348%3A30504

It needs to have both Determinate and Intederminate variations.
Reference: https://material-ui.com/components/progress/#progress and https://material.io/components/progress-indicators#circular-progress-indicators

At some point, we might need the Linear Progress, so the Circular should be a type of Progress Indicator.
Progress Indicator
↳ Circular
↳ Determinate
↳ Indeterminate
↳ Linear (in the future)

We need some new variations for this component:

1. Color variation: Neutral
2. Icon variations: Link Arrow (with an arrow icon) and External Link (with an icon indicating an external link).

Handoff https://www.figma.com/file/PgLv9k22CHHZZ867HwN65y/❖-Ocean-DS-Core-Components?node-id=2474%3A25370

Creates a caroussel component follow this figma handoff

It's not a bug actually, it's an improvement :)
I need the components to be centered on canvas by default (buttons, checkbox, switch, etc).

Does not apply to the Grid component, it's okay as it is.

Creates a transaction list component follow this figma handoff

Creates an input currency component follow this figma handoff

Change Radio Button's border width token to $border-width-hairline
Check all the specs here: https://www.figma.com/file/PgLv9k22CHHZZ867HwN65y/%E2%9D%96-Ocean-DS-Core-Components?node-id=1845%3A8880

• Fix prlint to allow bump in the title (because of dependabot PRs)

• Improves README.md to attract and guide new contributors

• Adds a contribution guide (CONTRIBUTING.md)

• Adds issue and pull request templates

  • https://github.com/stevemao/github-issue-templates
  • https://github.com/devspace/awesome-github-templates
  • See examples in the react component libraries

https://www.figma.com/file/0Cd9nFfhZCw9HN99o2KNRS/Pages-%26-Structure?node-id=0%3A1

I want to make the following enhancements on our Storybook page: https://www.figma.com/proto/HGymQjcMDy8BBn984dfjPt/Zeroheight?page-id=714%3A4141&node-id=714%3A4142&viewport=257%2C48%2C0.34&scaling=scale-down (this is some tweaks i have made using the Inspect feature on Chome, lol)

Also, it would be great to have a Cover on it as well, like this https://storybook.jota.meiuca.co/?path=/story/welcome--welcome. I'll provide the image, just need to figure out the size of it.

Create Step component based on this Hand-off file.

Creates a search component follow this figma handoff

1. Change color tokens on Disabled states:
   Disabled On - change to background-color: $color-interface-light-down
   Disabled Off - change to border-color: $color-interface-light-down

2. Add Indeterminate state
   Behavior reference: https://material.io/components/checkboxes#behavior

Specs are on: https://www.figma.com/file/PgLv9k22CHHZZ867HwN65y/%E2%9D%96-Ocean-DS-Core-Components?node-id=1845%3A8927

Disabled button shouldn't have the hover behavior since they are not clickable.

Changes border-width to use $border-width-hairline (1px) token.
https://www.figma.com/file/PgLv9k22CHHZZ867HwN65y/%E2%9D%96-Ocean-DS-%2F-Core-Components?node-id=1845%3A8927

We need to make a few adjustments on the Top Bar component:

@joaopedrorc Besides the adjustments I sent to you (https://airtable.com/shrI9sfdnkocsizb7) there are a few other things:

• Add scroll behavior: on scroll the Top Bar elevates with a drop shadow ($shadow-level1)
• Color variations:
  - Default: most used, with $interface-light-pure background and $brand-primary-pure elements
  - On Color: the tokens must be flexible so we can change the background and elements color. This variation is used on interfaces that have colored background and both, interface and top bar background colors, must match.

🔗 Follow this hand-off.

Hello there!
I'd like to simulate the component's behavior by displaying 4 checkboxes where the first is the "parent": when the parent is selected or deselected, so are all the others. If one of the children is selected, the parent state must be Indeterminate.

Something like:

If you have any doubts feel free to hit me up =)

Finalizes the typography component including the storybook stories and configuring your respective addons

Creates an input text with icon variation follow this figma handoff

Check this example for implementation: https://material-ui.com/components/text-fields/#input-adornments

Some things like paddings and sizes must be adjusted on the component as we discussed @leonardoalemax :)

We need to change the Parent item of the Transaction List Item.
Currently this component has only a Title but we might need other levels of information, just like in the default Transaction List Item. So the solution is: replace the Parent Item with the default Transaction List Item, with all 4 levels of text, tag, value and date/time.
The levels shown in the component can be customized and should be defined by the designed responsible for the interface.

Handoff https://bit.ly/3mq5sfY

Creates a card base component follow this figma handoff

Creates a snackbar component follow this figma handoff

Check this example for implentation: https://material-ui.com/components/snackbars/#snackbar

• Configure Continuous Integration

  • Checks Build, Test and Coverage

  • Involves the security team with sonar

• Configure Continuous Delivery

  • Publishes a version of the package in the NPM repo

  • Publishes storybook doc in the GH Pages

When the following components are in the focus state or hover state the border-width must be $border-width-thin, otherwise it should be border-width-hairline:

• Select
• Input
• TextArea

Sets font-family and change font-weight for FormLabel component

font-family: $font-family-base
font-weight: $font-weight-regular

This change affects these components:

• Select
• FormControl
• Input
• TextArea

We need to be able to use a tooltip on all Input types. The tooltip is triggered by hovering or touching the icon placed right next to the label. Touching outside the tooltip closes it.
Hand-off on this file.

Includes a size prop in the Link component.

    /**
     * The size of the button.
     * @default 'md'
     */
    size?: 'sm' | 'md';

sm = $font-size-xxs
md = $font-size-xs

https://www.figma.com/file/PgLv9k22CHHZZ867HwN65y/%E2%9D%96-Ocean-DS-%2F-Core-Components?node-id=2474%3A25370

Rule explanation: https://github.com/typescript-eslint/typescript-eslint/blob/v4.1.0/packages/eslint-plugin/docs/rules/explicit-module-boundary-types.md

This rule was flag recommended. See it below (plugin:@typescript-eslint/recommended):
https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#supported-rules

Motivação

Precisamos prever um modelo de estruturação do código e versionamento que retrate a realidade de termos 3 tipos de outputs de um único projeto. Web, Android e iOS.

Cenário atual

O modelo atual prevê somente casos para a geração dos tokens da Web, mas temos ainda os projetos Android e iOS para serem cobertos.

Em conversa com o Elton levantamos alguns possíveis pontos on seriam necessárias melhorias/adaptações, como configurações de CI e regras para versionamento, para aí sim podermos trabalhar de forma saudável com as 3 plataformas em harmonia.

Possíveis soluções

Versionamento

Conversamos sobre algo que no final das contas gere um resultado como:

web-v1.0.0
web-v1.1.0
web-v1.2.0

android-v1.0.0
android-v1.1.0
android-v1.2.0

ios-v1.0.0
ios-v1.1.0
ios-v1.2.0

A questão é que isso é somente uma parte, pois temos que definir a regra correta de increment de versão para caso.

Para ajudar a resolver a questão da regra de increment, pensamos também em talvez mudar a estrutura de pastas do projeto, onde cada plataforma acabaria ficando independente para fazer seu versionamento.

platforms/
+-- ios
    +-- formaters/
    +-- package.json
+-- android
    +-- formaters/
    +-- package.json
+-- web
    +-- formaters/
    +-- package.json
src/
+-- tokens.yml
package.json

Para ajudar a organizar a solução acima o Elton chegou a sugerir darmos uma olhada no https://github.com/lerna/lerna para vermos se atende.

Gostaríamos de abrir essa thread para tomarmos a decisão de como vamos seguir.

To create this component follow this hand-off

New props for autoplaying in Carousel Component.

Replaces color: $color-interface-dark-down; to color: $color-interface-dark-up;
This change affects these components:

• Select
• FormControl
• Input
• TextArea

Creates a top bar component follow this figma handoff

Create Badge componente following 🔗 this hand-off file.

Creates a divider component follow this figma handoff

Create this component based on this hand-off file.

Describe the bug
The select menu (listbox) is below some elements when activated.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/jovial-dawn-7onvw
2. Click on 'first select'
3. (Error 1) The arrow icon from the second select is displayed above 'listbox'.
4. (Error 2) The relative div is displayed above 'listbox'.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Desktop (please complete the following information):

• OS: Manjaro 21.0.3
• Browser: Firefox
• Version: 88.0

Additional context

• https://coder-coder.com/z-index-isnt-working/
• https://github.com/salesforce-ux/design-system/blob/master/ui/components/combobox/base/_index.scss#L468

The Primary Button should have a loading state.
Follow this handoff: https://www.figma.com/file/PgLv9k22CHHZZ867HwN65y/%E2%9D%96-Ocean-DS-Core-Components?node-id=1845%3A14382

There's something wrong with the max-width of the Select component, something is blocking it from going 100% wide.

Is your feature request related to a problem? Please describe.
I'm always frustrated when I see that the "dist" is part of the import path. Look at the examples below:

• import { Container } from '@useblu/ocean-components/dist/Grid';
• import { Col } from '@useblu/ocean-components/dist/Grid';
• import { Row } from '@useblu/ocean-components/dist/Grid';

This leaves the import path a bit large and is not very elegant.

Describe the solution you'd like
I'd like to omit the directory /dist of the import path.

Describe alternatives you've considered
Check how the famous libraries are doing.

• (Option 1) https://davidwells.io/blog/publishing-flat-npm-packages-for-easier-import-paths-smaller-consumer-bundle-sizes
• (Option 2) Copy the package.json into the dist folder and then run npm pack inside the dist folder.

The disabled state of the Icon Button shouldn't have any background color. Also, the icon color should be $color-interface-light-deep.

🔗 Hand-off here.

We're experiencing a lot of problems trying to customize a pre made component so it'll be better to build one from scratch and build it the way we need.

Creates a text button critical component follow this figma handoff

Is your feature request related to a problem? Please describe.
Today, versioning and publishing are manual processes.

Describe the solution you'd like

• Create an npm script to help with manual package versioning;
• Pre-configure lerna version options in lerna.json;
• Generates automatic changelogs when versioning;
• Publish packages on CI;
• Creates github release on CI;

Describe alternatives you've considered

• https://dev.to/jody/using-lerna-to-manage-your-javascript-monorepo-4eoo
• https://danmatthew.co.uk/notes/lerna-github-releases-circleci/

Is your feature request related to a problem? Please describe.
A change in CSS can lead to an unwanted visual regression. To avoid that we need a tool to save photos of our components to compare later on pull requests.

Describe alternatives you've considered
We can use chromatic for open source it's free.

Creates an alert component follow this figma handoff

We need a tooltip component on our Design System. The one we currently use is not that good 😅
No handoff sheet yet but here's the component.

https://kazzkiq.github.io/balloon.css/
https://wwayne.github.io/react-tooltip/
https://mui.com/pt/components/tooltips/ (this is nice)