diff --git a/app/assets/javascripts/initializers/initScrolling.js b/app/assets/javascripts/initializers/initScrolling.js index 352fe4f91..184052974 100644 --- a/app/assets/javascripts/initializers/initScrolling.js +++ b/app/assets/javascripts/initializers/initScrolling.js @@ -105,7 +105,7 @@ function buildTagsHTML(tag) { var antifollow = ''; if (tag.points < 0) { antifollow = - 'Anti-follow'; + 'Anti-follow'; } return `
diff --git a/app/assets/stylesheets/components/header.scss b/app/assets/stylesheets/components/header.scss index 1c0ffeaad..01d6a97a4 100644 --- a/app/assets/stylesheets/components/header.scss +++ b/app/assets/stylesheets/components/header.scss @@ -24,7 +24,7 @@ height: var(--header-height); } - .crayons-indicator { + .c-indicator { position: absolute; top: calc(var(--su-1) * -1); right: 0; diff --git a/app/assets/stylesheets/components/indicators.scss b/app/assets/stylesheets/components/indicators.scss index 22cfbd1a7..433bc6fb9 100644 --- a/app/assets/stylesheets/components/indicators.scss +++ b/app/assets/stylesheets/components/indicators.scss @@ -1,60 +1,39 @@ -@import '../config/import'; - -// indicator() - Generates styles for Indicators -// -// Indicators have bunch of styles combines with bunch of states. To make -// it easier to generate all these classes, we created a help which should -// do the job. -// -// @param {object} $this Cached variable with parent element -// @param {string} $name Value for border-radius -// @param {color} $color-1 Main color. - -@mixin indicator($this, $name, $color-1, $color-2) { - &#{'--' + $name} { - background-color: $color-1; - border-color: $color-1; - color: $color-2; - - &#{$this + '--outlined'} { - background-color: transparent; - color: $color-1; - border-color: $color-1; - } - } -} - -// Basic styling -.crayons-indicator { - font-family: var(--ff-monospace); - font-size: var(--fs-xs); +.c-indicator { + --bg: var(--badge-bg); + --color: var(--badge-color); padding: var(--su-1); - background-color: var(--indicator-default-bg); - border: 1px solid var(--indicator-default-bg); - color: var(--indicator-default-color); text-align: center; line-height: 1; + font-size: var(--fs-s); border-radius: var(--radius); display: inline-block; + background: var(--bg); + color: var(--color); + min-width: var(--su-2); - &--outlined { - background-color: transparent; - border-color: var(--indicator-default-bg); - color: var(--indicator-default-color); + &--success { + --bg: var(--badge-success-bg); + --color: var(--badge-success-color); } - @include indicator( - &, - accent, - var(--indicator-accent-bg), - var(--indicator-accent-color) - ); - @include indicator( - &, - critical, - var(--indicator-critical-bg), - var(--indicator-critical-color) - ); + &--warning { + --bg: var(--badge-warning-bg); + --color: var(--badge-warning-color); + } + + &--danger { + --bg: var(--badge-danger-bg); + --color: var(--badge-danger-color); + } + + &--info { + --bg: var(--badge-info-bg); + --color: var(--badge-info-color); + } + + &--relaxed { + padding: var(--su-2); + } &:empty { display: none; diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss index a58690bfd..5d26226e5 100644 --- a/app/assets/stylesheets/components/navigation.scss +++ b/app/assets/stylesheets/components/navigation.scss @@ -88,7 +88,7 @@ font-size: var(--fs-xl); } - .crayons-indicator { + .c-indicator { margin-left: auto; &:empty { diff --git a/app/assets/stylesheets/config/_colors.css b/app/assets/stylesheets/config/_colors.css index 6051fcc18..a8c2c0ae5 100644 --- a/app/assets/stylesheets/config/_colors.css +++ b/app/assets/stylesheets/config/_colors.css @@ -307,6 +307,30 @@ of particular colors in components and views. --cta-branded-border: var(--accent-brand); --cta-branded-border-hover: var(--accent-brand-darker); + /*********************************************** + ** Badges ************************************** + ***********************************************/ + + /* Badges: Default */ + --badge-bg: var(--base-30); + --badge-color: var(--base-80); + + /* Badges: Success */ + --badge-success-bg: var(--accent-success); + --badge-success-color: rgb(0,0,0); + + /* Badges: Warning */ + --badge-warning-bg: var(--accent-warning); + --badge-warning-color: rgb(0,0,0); + + /* Badges: Danger */ + --badge-danger-bg: var(--accent-danger); + --badge-danger-color: rgb(255,255,255); + + /* Badges: Info */ + --badge-info-bg: var(--accent-brand); + --badge-info-color: rgb(255,255,255); + /*********************************************** ** Utilities *********************************** ***********************************************/ diff --git a/app/assets/stylesheets/settings.scss b/app/assets/stylesheets/settings.scss index 83e741bf5..9b99ef451 100755 --- a/app/assets/stylesheets/settings.scss +++ b/app/assets/stylesheets/settings.scss @@ -34,7 +34,7 @@ justify-content: space-between; font-weight: var(--fw-medium); - .crayons-indicator { + .c-indicator { margin-left: 5px; } button { diff --git a/app/assets/stylesheets/themes/dark.css b/app/assets/stylesheets/themes/dark.css index 57123771c..fae8cc926 100644 --- a/app/assets/stylesheets/themes/dark.css +++ b/app/assets/stylesheets/themes/dark.css @@ -256,6 +256,18 @@ --cta-branded-border: var(--accent-brand); --cta-branded-border-hover: var(--accent-brand-lighter); + /*********************************************** + ** Badges ************************************** + ***********************************************/ + + /* Badges: Danger */ + --badge-danger-bg: var(--accent-danger-darker); + --badge-danger-color: rgb(255,255,255); + + /* Badges: Info */ + --badge-info-bg: var(--accent-brand-darker); + --badge-info-color: rgb(255,255,255); + /*********************************************** ** Utilities *********************************** ***********************************************/ diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 5247e0641..7dec2afce 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -272,7 +272,7 @@ module ApplicationHelper if method.to_sym.in?(Settings::Mandatory.keys) required = tag.span(I18n.t("helpers.application_helper.required"), - class: "crayons-indicator crayons-indicator--critical") + class: "c-indicator c-indicator--danger") content = safe_join([content, required]) end diff --git a/app/javascript/crayons/Indicator/__stories__/indicator.html.stories.jsx b/app/javascript/crayons/Indicator/__stories__/indicator.html.stories.jsx deleted file mode 100644 index c6743181e..000000000 --- a/app/javascript/crayons/Indicator/__stories__/indicator.html.stories.jsx +++ /dev/null @@ -1,106 +0,0 @@ -import { h } from 'preact'; -import notes from './indicators.mdx'; - -export default { - title: 'Components/Indicators', - parameters: { - docs: { - page: notes, - }, - }, -}; - -export const Default = () => Label; -Default.story = { name: 'default (grey)' }; - -export const GreyOutlined = () => ( - - Outlined - -); - -GreyOutlined.story = { - name: 'grey outlined', -}; - -export const GreyWithNumber = () => ( - 1 -); - -GreyWithNumber.story = { - name: 'grey with number', -}; - -export const Accent = () => ( - Label -); - -Accent.story = { - name: 'accent', -}; - -export const AccentOutlined = () => ( - - Outlined - -); - -AccentOutlined.story = { name: 'accent outlined' }; - -export const AccentWithNumber = () => ( - 1 -); - -AccentWithNumber.story = { - name: 'accent with number', -}; - -export const Critical = () => ( - Label -); - -Critical.story = { - name: 'critical', -}; - -export const CriticalOutline = () => ( - - Outlined - -); - -CriticalOutline.story = { - name: 'critical outline', -}; - -export const CriticalWithNumber = () => ( - 1 -); - -CriticalWithNumber.story = { - name: 'critical with number', -}; - -export const Inverted = () => ( - Label -); - -Inverted.story = { name: 'inverted' }; - -export const InvertedOutlined = () => ( - - Outlined - -); - -InvertedOutlined.story = { - name: 'inverted outlined', -}; - -export const InvertedWithNumber = () => ( - 1 -); - -InvertedWithNumber.story = { - name: 'inverted with number', -}; diff --git a/app/javascript/crayons/Indicator/__stories__/indicators.mdx b/app/javascript/crayons/Indicator/__stories__/indicators.mdx deleted file mode 100644 index c7d18c43b..000000000 --- a/app/javascript/crayons/Indicator/__stories__/indicators.mdx +++ /dev/null @@ -1,23 +0,0 @@ -## Indicators - -Indicators are meant to be used to inform user about, for example, unread -notifications. They supposed to steal user's attention and make him notice -or click specific element. - -We should keep in mind to never show too many indicators at the same time. Use -your best judgment. There are two types of indicators: - -- Rectangle with label (text or number) -- Bullet - just a circle without any text on it. - -And there arere four styles to pick from: - -- Default (grey) - nothing really crucial, basic information about something. - -- Accent (blueish) - something we want user to be aware of but it's also - not crucial information - -- Critical (red) - something super important, don't overuse it!! - -- Inverted (dark grey) - alternative to the default one, especially when we need - to show two default indicators next to each other. diff --git a/app/javascript/crayons/Indicators/Indicator.jsx b/app/javascript/crayons/Indicators/Indicator.jsx new file mode 100644 index 000000000..2876c6bbc --- /dev/null +++ b/app/javascript/crayons/Indicators/Indicator.jsx @@ -0,0 +1,31 @@ +import { h } from 'preact'; +import PropTypes from 'prop-types'; +import classNames from 'classnames/bind'; + +export const Indicator = ({ + children, + variant = 'default', + extraPadding, + className, + ...otherProps +}) => { + const classes = classNames('c-indicator', { + [`c-indicator--${variant}`]: variant && variant !== 'default', + 'p-2': extraPadding, + [className]: className, + }); + + return ( + + {children} + + ); +}; + +Indicator.displayName = 'Indicator'; + +Indicator.propTypes = { + variant: PropTypes.oneOf(['default', 'info', 'success', 'warning', 'danger']), + className: PropTypes.string, + extraPadding: PropTypes.bool, +}; diff --git a/app/javascript/crayons/Indicators/__stories__/Indicators.mdx b/app/javascript/crayons/Indicators/__stories__/Indicators.mdx new file mode 100644 index 000000000..d30e4993f --- /dev/null +++ b/app/javascript/crayons/Indicators/__stories__/Indicators.mdx @@ -0,0 +1,39 @@ +# Indicators + +Indicators are meant to be used to inform user about, for example, unread +notifications. They supposed to steal user's attention and make them notice +or click specific element. + +We should keep in mind to never show too many indicators at the same time. Use +your best judgment here. + +## Variants + +There's a bunch of variants (styles) to pick from: + +- Default - grey. +- Info - blue-ish. +- Success - green. +- Warninig - yellow. +- Danger - red. + +Even though they are named specifically, they don't really come with any function in mind - main difference is basically a color. + +## Padding + +By default, Indicator has very tight padding around label - `4px`. It's ok for short labels - like a number. +But for longer labels it may look better with some extra spacing. And there comes `extraPadding` prop which will increase the padding to `8px`. + +Keep in mind, Indicators can inherit any classes like every other element which means you can (if you have to) increase that padding manually +with, for example, `p-*` utility classes. + +## Design + + + Comparing designs with what's in the Storybook you may notice differences in colors. + This is due to the fact that Figma already reflects new colors palette which is not yet reflected in the codebase + (it's currently being reviewed in a separate PR). + +

+ + diff --git a/app/javascript/crayons/Indicators/__stories__/Indicators.stories.jsx b/app/javascript/crayons/Indicators/__stories__/Indicators.stories.jsx new file mode 100644 index 000000000..64bf33724 --- /dev/null +++ b/app/javascript/crayons/Indicators/__stories__/Indicators.stories.jsx @@ -0,0 +1,75 @@ +import { h } from 'preact'; +import { Indicator } from '../'; +import IndicatorsDoc from './Indicators.mdx'; + +export default { + component: Indicator, + title: 'Components/Indicators', + parameters: { + docs: { + page: IndicatorsDoc, + }, + }, + argTypes: { + variant: { + control: { + type: 'select', + options: { + default: undefined, + info: 'info', + success: 'success', + warning: 'warning', + danger: 'danger', + }, + }, + description: + 'There are bunch of available variants (styles) to pick from. The primary difference is color but each color should be used for different purpose. Read Docs for more info.', + table: { + defaultValue: { summary: 'default' }, + }, + }, + extraPadding: { + description: + 'Indicators are "tight" by default which means they have very little padding. This will gently increase the padding so it looks more loose.', + table: { + defaultValue: { summary: false }, + }, + }, + }, +}; + +export const Default = (args) => ; +Default.args = { + children: 'Hello world', +}; + +export const VariantInfo = (args) => ; +VariantInfo.args = { + ...Default.args, + variant: 'info', +}; + +export const VariantSuccess = (args) => ; +VariantSuccess.args = { + ...Default.args, + variant: 'success', +}; + +export const VariantWarning = (args) => ; +VariantWarning.args = { + ...Default.args, + variant: 'warning', +}; + +export const VariantDanger = (args) => ; +VariantDanger.args = { + ...Default.args, + variant: 'danger', +}; + +export const ExtraPadding = (args) => ; +ExtraPadding.args = { + ...Default.args, + extraPadding: true, + children: 'Hello world', +}; diff --git a/app/javascript/crayons/Indicators/index.js b/app/javascript/crayons/Indicators/index.js new file mode 100644 index 000000000..717dbf3a0 --- /dev/null +++ b/app/javascript/crayons/Indicators/index.js @@ -0,0 +1 @@ +export * from './Indicator'; diff --git a/app/javascript/githubRepos/singleRepo.jsx b/app/javascript/githubRepos/singleRepo.jsx index 671020fff..a417cdbdf 100644 --- a/app/javascript/githubRepos/singleRepo.jsx +++ b/app/javascript/githubRepos/singleRepo.jsx @@ -12,11 +12,7 @@ export class SingleRepo extends Component { forkLabel = () => { const { fork } = this.props; if (fork) { - return ( - - fork - - ); + return fork; } return null; }; diff --git a/app/views/admin/navigation_links/index.html.erb b/app/views/admin/navigation_links/index.html.erb index 6c1ca75c0..be7bf3031 100644 --- a/app/views/admin/navigation_links/index.html.erb +++ b/app/views/admin/navigation_links/index.html.erb @@ -15,7 +15,7 @@
<%= link[:icon].html_safe %>
- <%= link[:name] %> + <%= link[:name] %>
@@ -45,7 +45,7 @@
<%= link[:icon].html_safe %>
- <%= link[:name] %> + <%= link[:name] %> diff --git a/app/views/admin/users/_menu.html.erb b/app/views/admin/users/_menu.html.erb index c209a07c5..11949f01e 100644 --- a/app/views/admin/users/_menu.html.erb +++ b/app/views/admin/users/_menu.html.erb @@ -40,7 +40,7 @@ <%= link_to admin_users_gdpr_delete_requests_path, class: "nav-link #{'active' if params[:controller] == 'admin/users/gdpr_delete_requests'}" do %> GDPR Delete Requests <% if Users::GdprDeleteRequest.any? %> -  <%= Users::GdprDeleteRequest.count %> +  <%= Users::GdprDeleteRequest.count %> <% end %> <% end %> diff --git a/app/views/articles/_widget_list_item.html.erb b/app/views/articles/_widget_list_item.html.erb index a040b007f..90fca7127 100644 --- a/app/views/articles/_widget_list_item.html.erb +++ b/app/views/articles/_widget_list_item.html.erb @@ -5,7 +5,7 @@ <% if plucked_article[2] > 0 %> <%= t("views.comments.count", count: plucked_article[2]) %> <% else %> - <%= t("views.comments.empty") %> + <%= t("views.comments.empty") %> <% end %> <% end %> diff --git a/app/views/dashboards/_actions.html.erb b/app/views/dashboards/_actions.html.erb index 792670bff..981d9fa7b 100644 --- a/app/views/dashboards/_actions.html.erb +++ b/app/views/dashboards/_actions.html.erb @@ -5,7 +5,7 @@ href="<%= dashboard_path %>" <%= params[:action] == "show" && (params[:which] == "organization" || params[:which].blank?) ? ' aria-current="page"'.html_safe : "" %>> <%= t("views.dashboard.actions.posts") %> - <%= @user.articles_count %> + <%= @user.articles_count %> @@ -14,7 +14,7 @@ href="<%= user_series_path(current_user.username) %>" <%= params[:action] == "series" && (params[:which] == "organization" || params[:which].blank?) ? ' aria-current="page"'.html_safe : "" %>> <%= t("views.dashboard.actions.series") %> - <%= @collections_count %> + <%= @collections_count %> @@ -23,7 +23,7 @@ href="/dashboard/user_followers" <%= params[:action] == "followers" ? ' aria-current="page"'.html_safe : "" %>> <%= t("views.dashboard.actions.followers") %> - <%= @user.followers_count %> + <%= @user.followers_count %> @@ -32,7 +32,7 @@ href="<%= dashboard_following_tags_path %>" <%= params[:action] == "following_tags" ? ' aria-current="page"'.html_safe : "" %>> <%= t("views.dashboard.actions.following_tags") %> - <%= @user.following_tags_count %> + <%= @user.following_tags_count %> @@ -41,7 +41,7 @@ href="<%= dashboard_following_users_path %>" <%= params[:action] == "following_users" ? ' aria-current="page"'.html_safe : "" %>> <%= t("views.dashboard.actions.following_users") %> - <%= @user.following_users_count %> + <%= @user.following_users_count %> @@ -50,7 +50,7 @@ href="<%= dashboard_following_organizations_path %>" <%= params[:action] == "following_organizations" ? ' aria-current="page"'.html_safe : "" %>> <%= t("views.dashboard.actions.following_orgs") %> - <%= @user.following_organizations_count %> + <%= @user.following_organizations_count %> @@ -59,7 +59,7 @@ href="<%= dashboard_following_podcasts_path %>" <%= params[:action] == "following_podcasts" ? ' aria-current="page"'.html_safe : "" %>> <%= t("views.dashboard.actions.following_pods") %> - <%= @user.following_podcasts_count %> + <%= @user.following_podcasts_count %> diff --git a/app/views/dashboards/_dashboard_article_row.html.erb b/app/views/dashboards/_dashboard_article_row.html.erb index 44c719a8a..1ee81028c 100644 --- a/app/views/dashboards/_dashboard_article_row.html.erb +++ b/app/views/dashboards/_dashboard_article_row.html.erb @@ -2,7 +2,7 @@

<% if article.archived %> - <%= t("views.dashboard.article.archived") %> + <%= t("views.dashboard.article.archived") %> <% end %> <% if article.organization_id %> @@ -30,7 +30,7 @@
<% if !article.published? %> - <%= t("views.dashboard.article.draft") %> + <%= t("views.dashboard.article.draft") %> <% else %>
"> diff --git a/app/views/dashboards/following_tags.html.erb b/app/views/dashboards/following_tags.html.erb index 61bf0a86e..008ee1f3c 100644 --- a/app/views/dashboards/following_tags.html.erb +++ b/app/views/dashboards/following_tags.html.erb @@ -17,18 +17,18 @@
<%= t("views.dashboard.following_tags.adjust") %> - <%= t("views.dashboard.following_tags.default") %> + <%= t("views.dashboard.following_tags.default") %>
<% negative_follow_shown_once = false %> <% @followed_tags.each do |follow| %> <% tag = follow.followable %> <% if tag %> -
+

<%= render_tag_link(tag.name) %> <% if follow.explicit_points < 0 %> - "><%= t("views.dashboard.following_tags.anti.text") %> + "><%= t("views.dashboard.following_tags.anti.text") %> <% end %>

@@ -39,7 +39,7 @@ <%= fields(follow) do |f| %> <%= f.hidden_field(:id, name: "follows[][id]", form: "follows_update_form", id: "follow_id_#{follow.followable}") %> <%= f.number_field(:explicit_points, step: :any, required: true, class: "crayons-textfield flex-1 fs-s", name: "follows[][explicit_points]", form: "follows_update_form", "aria-label": t("views.dashboard.following_tags.number.aria_label", name: follow.followable), - id: "explicit_points_#{follow.followable}") %> + id: "explicit_points_#{follow.followable}") %> <% end %>
<% end %> diff --git a/app/views/layouts/_sidebar_nav_link.html.erb b/app/views/layouts/_sidebar_nav_link.html.erb index efb12b03b..09d51dd17 100644 --- a/app/views/layouts/_sidebar_nav_link.html.erb +++ b/app/views/layouts/_sidebar_nav_link.html.erb @@ -6,7 +6,7 @@ <%= t("views.main.nav_name.#{link.name}", default: link.name) %> <% if link.url.include?("readinglist") %> - + <% end %> diff --git a/app/views/layouts/_top_bar.html.erb b/app/views/layouts/_top_bar.html.erb index 7cb30e492..a252457f3 100644 --- a/app/views/layouts/_top_bar.html.erb +++ b/app/views/layouts/_top_bar.html.erb @@ -40,7 +40,7 @@ "> <%= crayons_icon_tag(:bell, title: t("views.main.header.notifications.icon")) %> - +
diff --git a/app/views/moderations/_mod_sidebar_left.html.erb b/app/views/moderations/_mod_sidebar_left.html.erb index fe04b9e33..aee290657 100644 --- a/app/views/moderations/_mod_sidebar_left.html.erb +++ b/app/views/moderations/_mod_sidebar_left.html.erb @@ -19,7 +19,7 @@ <% @current_user_tags.each do |tag| %> " class="crayons-link crayons-link--block <%= "crayons-link--current" if tag == @tag&.name %>" data-tag-name="<%= tag %>"> #<%= tag %> - + <% end %> <% end %> @@ -42,7 +42,7 @@
  • " class="crayons-tabs__item <%= "crayons-tabs__item--current" if tag == @tag&.name %>" data-tag-name="<%= tag %>" aria-current="<%= "page" if tag == @tag&.name %>"> #<%= tag %> - +
    • <% end %> diff --git a/app/views/users/_extensions.html.erb b/app/views/users/_extensions.html.erb index d449d5ef6..3e93ea9b6 100644 --- a/app/views/users/_extensions.html.erb +++ b/app/views/users/_extensions.html.erb @@ -6,7 +6,7 @@

    <%= t("views.settings.extensions.web") %> - <%= t("core.beta") %> + <%= t("core.beta") %>

    <%= t("views.settings.extensions.micro") %><%= t("views.settings.extensions.learn") %> diff --git a/app/views/users/_github_repositories_area.html.erb b/app/views/users/_github_repositories_area.html.erb index 2c695cc31..5c2ca3ab5 100644 --- a/app/views/users/_github_repositories_area.html.erb +++ b/app/views/users/_github_repositories_area.html.erb @@ -15,7 +15,7 @@ <% end %>

    <% if repo.fork %> - <%= t("views.users.github.fork") %> + <%= t("views.users.github.fork") %> <% end %> <% if repo.language %> diff --git a/app/views/users/_org_admin.html.erb b/app/views/users/_org_admin.html.erb index 895112898..e382fc211 100644 --- a/app/views/users/_org_admin.html.erb +++ b/app/views/users/_org_admin.html.erb @@ -10,11 +10,11 @@

    <%= org_membership.user.name %> <% if org_membership.user == @user %> - <%= t("views.settings.org.admin.you") %> + <%= t("views.settings.org.admin.you") %> <% end %> <% if org_membership.type_of_user == "admin" %> - <%= t("views.settings.org.admin.admin") %> + <%= t("views.settings.org.admin.admin") %> <% end %>

    diff --git a/spec/requests/admin/users/gdpr_delete_requests_spec.rb b/spec/requests/admin/users/gdpr_delete_requests_spec.rb index e5fcb1dea..fdfe480ce 100644 --- a/spec/requests/admin/users/gdpr_delete_requests_spec.rb +++ b/spec/requests/admin/users/gdpr_delete_requests_spec.rb @@ -22,7 +22,7 @@ RSpec.describe "/admin/users/gdpr_delete_requests", type: :request do it "displays the number of existing requests" do get admin_users_gdpr_delete_requests_path - expect(response.body).to include("1") + expect(response.body).to include("1") end it "destroys the gdpr delete request on confirmation" do @@ -41,7 +41,7 @@ RSpec.describe "/admin/users/gdpr_delete_requests", type: :request do context "without gdpr request" do it "doesn't display the number of existing requests" do get admin_users_gdpr_delete_requests_path - expect(response.body).not_to include("0") + expect(response.body).not_to include("0") end end end