Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Core HTML Element Atom: Button #111

Merged
merged 2 commits into from
Jan 8, 2019
Merged

Core HTML Element Atom: Button #111

merged 2 commits into from
Jan 8, 2019

Conversation

arcticicestudio
Copy link
Contributor

Resolves #110

gh-111-button
gh-111-ghost
gh-111-ghost-dashed
gh-111-ghost-dashed-quiet
gh-111-ghost-quiet
gh-111-link-internal-external

@arcticicestudio
Implement Button CSS styles
8c45192 
It provides multiple variations:

- `primary` — uses the primary color `nord8` for background/border/text
  colorization
- `secondary` — uses the secondary color `nord9` for
  background/border/text colorization
- `simple` — uses the _Snow Storm_ and _Polar Night_ palettes for
  background/border/text colorization
- `subtle` — only colorizes the background on hover using the
  "Snow Storm" and "Polar Night" palettes for background/border/text
  colorization

Next to variations there are additional props to toggle more styles:

- `dashed` — uses the `dashed` property for the CSS `border-style` (1)
  attribute
- `ghost` — only uses a border instead of a background color
- `outlined` — uses uses a border in addition to a background color
- `quiet` — keeps the initial text colorization on hover

References:
  (1) https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

Associated epic: GH-63
GH-110
@arcticicestudio
Implement core base HTML atom Button
ff64b75 
It consists of the previously implemented styles and variants and
represents a `<button>` (1). Next to this is can also wrap the base HTML
element atom `A` (2) to handle internal and external links.

References:
  (1) https://developer.mozilla.org/de/docs/Web/HTML/Element/button
  (2) #70

Associated epic: GH-63
GH-110
@arcticicestudio arcticicestudio added this to the 0.6.0 milestone Jan 8, 2019
@arcticicestudio arcticicestudio self-assigned this Jan 8, 2019
@codecov
Copy link

codecov bot commented Jan 8, 2019

Codecov Report

Merging #111 into develop will decrease coverage by 1.5%.
The diff coverage is 60.52%.

Impacted file tree graph

@@             Coverage Diff             @@
##           develop     #111      +/-   ##
===========================================
- Coverage    73.82%   72.32%   -1.51%     
===========================================
  Files          122      124       +2     
  Lines          531      607      +76     
  Branches        56      103      +47     
===========================================
+ Hits           392      439      +47     
- Misses         139      168      +29
Flag Coverage Δ
#unit 72.32% <60.52%> (-1.51%) ⬇️
Impacted Files Coverage Δ
src/components/atoms/core/Button/styles.js 56.06% <56.06%> (ø)
src/components/atoms/core/Button/Button.jsx 90% <90%> (ø)
src/styles/theme/utils/themedModeVariant.js 100% <0%> (+50%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 072407c...ff64b75. Read the comment docs.

@arcticicestudio arcticicestudio merged commit 41ce16f into develop Jan 8, 2019
@arcticicestudio arcticicestudio deleted the feature/gh-110-core-html-element-atom-button branch January 8, 2019 16:51
@arcticicestudio arcticicestudio removed their assignment Jan 8, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@svengreb svengreb svengreb approved these changes

Assignees
No one assigned
Labels
context-ui scope-ux type-feature
Projects
None yet
Milestone
0.6.0
Development

Successfully merging this pull request may close these issues.
2 participants
@arcticicestudio @svengreb