ocean-ds / ocean-android Goto Github PK

Create the Link component following the Handoff sheet

Creates a checkbox component follow this figma handoff

Is your feature request related to a problem? Please describe.
The blu iconography must be unique for all platforms, for that reason there's a project ocean-icons that centralizes the SVGs.

Describe the solution you'd like
Like we did for ocean-tokens we can integrate this project with the ocean-icons and export an android version of these icons.

Create a new Heading component. The only difference from Heading 4 is the font size, it should be 14px ($font-size-xxs).
🔗 Handoff

This new variant has an action/a button. Follow specs here.

Is your feature request related to a problem? Please describe.
We must consider tests when developing a library that supports other applications, because this brings some quality and facilitates new changes. So, I propose to configure this project to require 100% test coverage of what we are delivering.

Describe the solution you'd like

• Configure local and CI to run tests.
• Pull requests must be 100% changes coverage for merge.

Describe alternatives you've considered
https://about.codecov.io/blog/code-coverage-for-android-development-using-kotlin-jacoco-github-actions-and-codecov/

Additional context
You can take what we've made in this project as a reference:
https://github.com/ocean-ds/ocean-web/blob/master/.github/workflows/ci.yml

This org "ocean-ds" embraces GitHub actions as our main continuous integration and delivery tool.
So, we must change replaces the configuration written for circleci with Github actions.

Is your feature request related to a problem? Please describe.
We must create a minimal guide for installation and usage on the readme.

Describe the solution you'd like

• Fill the installation and usage section
• Link ocean-tokens and ocean-icons as related projects

Additional context
Example for a related projects section: https://github.com/ocean-ds/ocean-web#related-projects

Connecting this repo with Blu slack to notify issues, pull requests, and releases.

HEADING 1, 2, 3 🔄
font-family: fontFamilyBase
font-weight: fontWeightExtraBold
line-height: lineHeightMedium

HEADING 4, 5 🔄
font-family: fontFamilyBase
font-weight: fontWeightBold
line-height: lineHeightLoose

SUBTITLE 1,2 🔄
line-heigt: lineHeightLoose

CAPTION 🔄
font-weight: fontWeightRegular

CAPTION BOLD 🆕
font-weight: fontWeightSemiBold

EYEBROW 🆕
🔗 Hand-off here.
it would be nice if developers could customize the color of the component instead of just sticking to the default one. That way, the component could work with different designs and needs.

This component has gone through a few changes in order to ensure consistency among all the list components. Here's what's changed:

Icon Background / States: Hover e Focused
background-color: $brand-primary-up
opacity: $opacity-level-light

Level 1 text
font-weight: $font-weight-regular
font-color: $interface-dark-pure

Transaction Value
Change names:
Positive -> Inflow
Negative -> Outflow

Value (outflow and default)
font-weight: $font-weight-medium
font-color: $interface-dark-pure

Value (inflow and cancelled)
font-weight: $font-weight-medium

Full handoff can be found at this link

I've written some specs about this issue in this Notion link: https://judesignblu.notion.site/Ajustes-Modal-Drawer-30a8e031064d467bbef2d7ddedf54159

Creates a text button critical component follow this figma handoff

Creates an icon button component follow this figma handoff

• Remove Neutral 02 Tag, we are not using it

• Change Neutral 03 to Complementary

• Change Neutral 01 to Neutral

• Add Tag Highlight (former Badge Text)

🔗 Hand-off here.

Change font-weight from $font-weight-regular to $font-weight-medium.

Is your feature request related to a problem? Please describe.
Our contribution guide file is a little bit vague with "todos" spread everywhere. Besides that the prerequisites are wrong.

Describe the solution you'd like

• Fix the prerequisites section
• Fix all TODOs
• Fill the project structure section
• Fill the "styleguides" section

Creates a card base component follow this figma handoff

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

• Add Extended variant
• 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.

This type of Alert should be used when a custom icon other than the default options is needed.
Handoff here
Documentation / Usage here

Creates templates for issues and pull requests that make the most sense for this project (Design-System > Android > Kotlin).

You can find examples created in a similar scenario:

• https://github.com/ocean-ds/ocean-web/tree/master/.github

External Examples:

• https://github.com/devspace/awesome-github-templates
• https://github.com/stevemao/github-issue-templates

Guide:

• https://www.talater.com/open-source-templates/#/

We need to include a contribution guide if we want external contributions.

You can check how was made in the ocean-web project for reference.

Other resources:

• https://github.com/mntnr/awesome-contributing
• https://mozillascience.github.io/working-open-workshop/contributing/

Switch

• width: 40px
• height: 20px
• selector (circle): 14x14
• padding: 2px

Creates a transaction list component follow this figma handoff

Creates an input currency component follow this figma handoff

Radio Button

• width: 20px
• height: 20px
• inner circle (selected): 8x8

Text

• font size: 14px

Creates a caroussel component follow this figma handoff

Is your feature request related to a problem? Please describe.
All changes merged on master generate a new version of packages and in some cases, this shouldn't happen.
Changes that do not affect the API must not be deployed (examples: changes on non-source files). This brings minimal versions, changelog, and costumers package updates.

Describe the solution you'd like
As we have already used conventionalcommits pattern we can determine through the commit message what change this commit represents. If that change represents a major, minor, or patch we can generate and deploy a new version following the semver specification.

Describe alternatives you've considered

• https://dwmkerr.com/conventional-commits-and-semantic-versioning-for-java/
• https://github.com/KengoTODA/gradle-semantic-release-plugin
• https://blog.usejournal.com/semantic-release-for-fastlane-781df4cf5888
• https://www.thoughtworks.com/en-br/insights/blog/automating-semantic-versioning-model-mobile-releases

We got rid of the shadow in every variation of this component ;P

The Conventional Commits specification is a lightweight convention on top of commit messages. It provides an easy set of rules for creating an explicit commit history; which makes it easier to write automated tools on top of. This convention dovetails with SemVer, by describing the features, fixes, and breaking changes made in commit messages.
https://www.conventionalcommits.org/en/v1.0.0/#summary

There are many adoptions of this convention in web open-source projects. Maybe it's common in other platforms too. So why not include it in this repo?

How we can implement it?

• Prevents commit with wrong messages:
  • For web: https://github.com/ocean-ds/ocean-web/blob/master/.husky/commit-msg
  • You can dot it via Git Hooks (https://dwmkerr.com/conventional-commits-and-semantic-versioning-for-java/)
• Requires in the CI worflow:
  • Example: https://github.com/ocean-ds/ocean-web/blob/v1.2.2/.github/workflows/ci.yml#L40
• Includes a guide tool to help developers
  • For editor: https://github.com/ocean-ds/ocean-web/blob/master/.vscode/extensions.json#L7
  • For CLI: https://github.com/commitizen/cz-cli#using-the-command-line-tool

The actual readme is not attractive to new users or possible contributors. It must be refactored!

You can check ocean-web project for reference.

Other resources:

• https://www.makeareadme.com/
• https://github.com/matiassingers/awesome-readme

Checkbox

• width: 20px
• height: 20px
• icon: 16px x 16px

Text

• font size: 14px

Should be something like this:

"Ocean" is the design system for Blu. There's no need to enforce "ds" in packages' names. Making more longer and redundant.

My suggestions

• Rename "ocean-ds-components" to "ocean-core" (like in the web project)
• Rename "ocean-ds-tokens" to "ocean-tokens"

Create a new Heading component. The only difference from Heading 4 is the font size, it should be 14px ($font-size-xxs).
🔗 Handoff

• Change the name Tiny to Dot and make it a badge subtype (like count or text), not a size option.
• Badge Text with Colors shouldn't exist
• Badge Text no longer exist as a badge, it will be a Tag variation. See Tag adjustments.

🔗 Hand-off here.