diff --git a/app/assets/javascripts/wizard/components/font-preview.js b/app/assets/javascripts/wizard/components/font-preview.js index 1a5d71bc5bc..fef9fa56d4d 100644 --- a/app/assets/javascripts/wizard/components/font-preview.js +++ b/app/assets/javascripts/wizard/components/font-preview.js @@ -1,30 +1,26 @@ import I18n from "I18n"; -import discourseComputed from "discourse-common/utils/decorators"; import { observes } from "discourse-common/utils/decorators"; import { createPreviewComponent, darkLightDiff, chooseDarker, - LOREM, } from "wizard/lib/preview"; -export default createPreviewComponent(305, 165, { +const LOREM = ` +Lorem ipsum dolor sit amet, consectetur adipiscing. +Nullam eget sem non elit tincidunt rhoncus. Fusce +velit nisl, porttitor sed nisl ac, consectetur interdum +metus. Fusce in consequat augue, vel facilisis felis.`; + +export default createPreviewComponent(659, 320, { logo: null, avatar: null, - classNameBindings: ["isSelected"], - - @discourseComputed("selectedId", "fontId") - isSelected(selectedId, fontId) { - return selectedId === fontId; - }, - - click() { - this.onChange(this.fontId); - }, - - @observes("step.fieldsById.base_scheme_id.value") - themeChanged() { + @observes( + "step.fieldsById.body_font.value", + "step.fieldsById.heading_font.value" + ) + fontChanged() { this.triggerRepaint(); }, @@ -35,47 +31,44 @@ export default createPreviewComponent(305, 165, { }; }, - paint(ctx, colors, font, width, height) { + paint({ ctx, colors, font, headingFont, width, height }) { const headerHeight = height * 0.3; - this.drawFullHeader(colors, font); + + this.drawFullHeader(colors, headingFont, this.logo); const margin = width * 0.04; const avatarSize = height * 0.2; - const lineHeight = height / 9.5; + const lineHeight = height / 11; // Draw a fake topic this.scaleImage( this.avatar, margin, - headerHeight + height * 0.085, + headerHeight + height * 0.11, avatarSize, avatarSize ); - const titleFontSize = headerHeight / 44; + const titleFontSize = headerHeight / 55; ctx.beginPath(); ctx.fillStyle = colors.primary; - ctx.font = `bold ${titleFontSize}em '${font}'`; - ctx.fillText( - I18n.t("wizard.previews.font_title", { font }), - margin, - height * 0.3 - ); + ctx.font = `bold ${titleFontSize}em '${headingFont}'`; + ctx.fillText(I18n.t("wizard.previews.topic_title"), margin, height * 0.3); - const bodyFontSize = height / 220.0; + const bodyFontSize = height / 330.0; ctx.font = `${bodyFontSize}em '${font}'`; let line = 0; const lines = LOREM.split("\n"); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 5; i++) { line = height * 0.35 + i * lineHeight; ctx.fillText(lines[i], margin + avatarSize + margin, line); } // Share Button ctx.beginPath(); - ctx.rect(margin, line + lineHeight, width * 0.14, height * 0.14); + ctx.rect(margin, line + lineHeight, width * 0.1, height * 0.12); ctx.fillStyle = darkLightDiff(colors.primary, colors.secondary, 90, 65); ctx.fill(); ctx.fillStyle = chooseDarker(colors.primary, colors.secondary); @@ -89,10 +82,10 @@ export default createPreviewComponent(305, 165, { // Reply Button ctx.beginPath(); ctx.rect( - margin * 2 + width * 0.14, + margin + width * 0.12, line + lineHeight, - width * 0.14, - height * 0.14 + width * 0.1, + height * 0.12 ); ctx.fillStyle = colors.tertiary; ctx.fill(); @@ -100,12 +93,12 @@ export default createPreviewComponent(305, 165, { ctx.font = `${bodyFontSize}em '${font}'`; ctx.fillText( I18n.t("wizard.previews.reply_button"), - margin * 2 + width * 0.14 + width / 55, + margin + width * 0.12 + width / 55, line + lineHeight * 1.85 ); // Draw Timeline - const timelineX = width * 0.8; + const timelineX = width * 0.86; ctx.beginPath(); ctx.strokeStyle = colors.tertiary; ctx.lineWidth = 0.5; diff --git a/app/assets/javascripts/wizard/components/font-previews.js b/app/assets/javascripts/wizard/components/font-previews.js deleted file mode 100644 index 65c8d2f4c7a..00000000000 --- a/app/assets/javascripts/wizard/components/font-previews.js +++ /dev/null @@ -1,8 +0,0 @@ -import Component from "@ember/component"; -export default Component.extend({ - actions: { - changed(value) { - this.set("field.value", value); - }, - }, -}); diff --git a/app/assets/javascripts/wizard/components/homepage-preview.js b/app/assets/javascripts/wizard/components/homepage-preview.js index 898ef406e72..8848ebd3176 100644 --- a/app/assets/javascripts/wizard/components/homepage-preview.js +++ b/app/assets/javascripts/wizard/components/homepage-preview.js @@ -21,8 +21,8 @@ export default createPreviewComponent(659, 320, { }; }, - paint(ctx, colors, font, width, height) { - this.drawFullHeader(colors, font); + paint({ ctx, colors, font, width, height }) { + this.drawFullHeader(colors, font, this.logo); if (this.get("step.fieldsById.homepage_style.value") === "latest") { this.drawPills(colors, font, height * 0.15); diff --git a/app/assets/javascripts/wizard/components/image-preview-favicon.js b/app/assets/javascripts/wizard/components/image-preview-favicon.js index 06884b0d687..82b0e95cee0 100644 --- a/app/assets/javascripts/wizard/components/image-preview-favicon.js +++ b/app/assets/javascripts/wizard/components/image-preview-favicon.js @@ -14,7 +14,8 @@ export default createPreviewComponent(371, 124, { return { tab: "/images/wizard/tab.png", image: this.get("field.value") }; }, - paint(ctx, colors, font, width, height) { + paint(options) { + const { ctx, width, height } = options; this.scaleImage(this.tab, 0, 0, width, height); this.scaleImage(this.image, 40, 25, 30, 30); diff --git a/app/assets/javascripts/wizard/components/image-preview-large-icon.js b/app/assets/javascripts/wizard/components/image-preview-large-icon.js index b687d6a5ec0..0d7c86a7d60 100644 --- a/app/assets/javascripts/wizard/components/image-preview-large-icon.js +++ b/app/assets/javascripts/wizard/components/image-preview-large-icon.js @@ -17,7 +17,8 @@ export default createPreviewComponent(325, 125, { }; }, - paint(ctx, colors, font, width, height) { + paint(options) { + const { width, height } = options; this.scaleImage(this.image, 10, 8, 87, 87); this.scaleImage(this.ios, 0, 0, width, height); }, diff --git a/app/assets/javascripts/wizard/components/image-preview-logo-small.js b/app/assets/javascripts/wizard/components/image-preview-logo-small.js index ec18f0fe314..ba55380d159 100644 --- a/app/assets/javascripts/wizard/components/image-preview-logo-small.js +++ b/app/assets/javascripts/wizard/components/image-preview-logo-small.js @@ -13,7 +13,8 @@ export default createPreviewComponent(375, 100, { return { image: this.get("field.value") }; }, - paint(ctx, colors, font, width, height) { + paint(options) { + const { ctx, colors, font, headingFont, width, height } = options; const headerHeight = height / 2; drawHeader(ctx, colors, width, headerHeight); @@ -39,7 +40,8 @@ export default createPreviewComponent(375, 100, { const afterLogo = headerMargin * 1.7 + imageWidth; const fontSize = Math.round(headerHeight * 0.4); - ctx.font = `Bold ${fontSize}px '${font}'`; + + ctx.font = `Bold ${fontSize}px '${headingFont}'`; ctx.fillStyle = colors.primary; const title = LOREM.substring(0, 27); ctx.fillText( diff --git a/app/assets/javascripts/wizard/components/image-preview-logo.js b/app/assets/javascripts/wizard/components/image-preview-logo.js index f5d941789e9..acad28063a2 100644 --- a/app/assets/javascripts/wizard/components/image-preview-logo.js +++ b/app/assets/javascripts/wizard/components/image-preview-logo.js @@ -13,12 +13,13 @@ export default createPreviewComponent(400, 100, { return { image: this.get("field.value") }; }, - paint(ctx, colors, font, width, height) { + paint({ ctx, colors, font, width, height }) { const headerHeight = height / 2; drawHeader(ctx, colors, width, headerHeight); const image = this.image; + const headerMargin = headerHeight * 0.2; const imageHeight = headerHeight - headerMargin * 2; diff --git a/app/assets/javascripts/wizard/components/theme-preview.js b/app/assets/javascripts/wizard/components/theme-preview.js index 8db5dcfb5a9..0abbb21583b 100644 --- a/app/assets/javascripts/wizard/components/theme-preview.js +++ b/app/assets/javascripts/wizard/components/theme-preview.js @@ -35,10 +35,10 @@ export default createPreviewComponent(305, 165, { }; }, - paint(ctx, colors, font, width, height) { + paint({ ctx, colors, font, headingFont, width, height }) { const headerHeight = height * 0.3; - this.drawFullHeader(colors, font); + this.drawFullHeader(colors, headingFont, this.logo); const margin = width * 0.04; const avatarSize = height * 0.2; @@ -57,7 +57,7 @@ export default createPreviewComponent(305, 165, { ctx.beginPath(); ctx.fillStyle = colors.primary; - ctx.font = `bold ${titleFontSize}em '${font}'`; + ctx.font = `bold ${titleFontSize}em '${headingFont}'`; ctx.fillText(I18n.t("wizard.previews.topic_title"), margin, height * 0.3); const bodyFontSize = height / 220.0; diff --git a/app/assets/javascripts/wizard/components/wizard-field-dropdown.js b/app/assets/javascripts/wizard/components/wizard-field-dropdown.js index a3b4bcdc322..3e49cb3561f 100644 --- a/app/assets/javascripts/wizard/components/wizard-field-dropdown.js +++ b/app/assets/javascripts/wizard/components/wizard-field-dropdown.js @@ -1,4 +1,5 @@ import Component from "@ember/component"; + export default Component.extend({ keyPress(e) { e.stopPropagation(); diff --git a/app/assets/javascripts/wizard/controllers/application.js b/app/assets/javascripts/wizard/controllers/application.js index 76192cc6a05..a9f67bbe49e 100644 --- a/app/assets/javascripts/wizard/controllers/application.js +++ b/app/assets/javascripts/wizard/controllers/application.js @@ -1,4 +1,5 @@ import Controller from "@ember/controller"; +import { dasherize } from "@ember/string"; import discourseComputed from "discourse-common/utils/decorators"; export default Controller.extend({ @@ -16,7 +17,9 @@ export default Controller.extend({ return []; } - const fontField = fontsStep.get("fieldsById.font_previews"); - return fontField.choices.map((choice) => `font-${choice.data.class}`); + const fontField = fontsStep.get("fieldsById.body_font"); + return fontField.choices.map( + (choice) => `body-font-${dasherize(choice.id)}` + ); }, }); diff --git a/app/assets/javascripts/wizard/lib/preview.js b/app/assets/javascripts/wizard/lib/preview.js index 90d7fe3cf95..73b4513d224 100644 --- a/app/assets/javascripts/wizard/lib/preview.js +++ b/app/assets/javascripts/wizard/lib/preview.js @@ -93,6 +93,10 @@ export function createPreviewComponent(width, height, obj) { } const font = this.wizard.getCurrentFont(this.fontId); + const headingFont = this.wizard.getCurrentFont( + this.fontId, + "heading_font" + ); if (!font) { return; } @@ -102,7 +106,15 @@ export function createPreviewComponent(width, height, obj) { ctx.fillStyle = colors.secondary; ctx.fillRect(0, 0, width, height); - this.paint(ctx, colors, font, this.width, this.height); + const options = { + ctx, + colors, + font, + headingFont, + width: this.width, + height: this.height, + }; + this.paint(options); // draw border ctx.beginPath(); @@ -142,7 +154,7 @@ export function createPreviewComponent(width, height, obj) { ctx.drawImage(scaled[key], x, y, w, h); }, - drawFullHeader(colors, font) { + drawFullHeader(colors, font, logo) { const { ctx } = this; const headerHeight = height * 0.15; @@ -154,10 +166,16 @@ export function createPreviewComponent(width, height, obj) { const headerMargin = headerHeight * 0.2; const logoHeight = headerHeight - headerMargin * 2; - ctx.beginPath(); - ctx.fillStyle = colors.header_primary; - ctx.font = `bold ${logoHeight}px '${font}'`; - ctx.fillText("Discourse", headerMargin, headerHeight - headerMargin); + const ratio = logoHeight / logo.height; + this.scaleImage( + logo, + headerMargin, + headerMargin, + logo.width * ratio, + logoHeight + ); + + this.scaleImage(logo, width, headerMargin); // Top right menu this.scaleImage( diff --git a/app/assets/javascripts/wizard/models/wizard.js b/app/assets/javascripts/wizard/models/wizard.js index db2f583c210..1d8cbdbd615 100644 --- a/app/assets/javascripts/wizard/models/wizard.js +++ b/app/assets/javascripts/wizard/models/wizard.js @@ -21,7 +21,7 @@ const Wizard = EmberObject.extend({ if (!logoStep) { return; } - return logoStep.get("fieldsById.logo_url.value"); + return logoStep.get("fieldsById.logo.value"); }, // A bit clunky, but get the current colors from the appropriate step @@ -54,13 +54,13 @@ const Wizard = EmberObject.extend({ return option.data.colors; }, - getCurrentFont(fontId) { + getCurrentFont(fontId, type = "body_font") { const fontsStep = this.steps.findBy("id", "fonts"); if (!fontsStep) { return; } - const fontChoice = fontsStep.get("fieldsById.font_previews"); + const fontChoice = fontsStep.get(`fieldsById.${type}`); if (!fontChoice) { return; } @@ -80,7 +80,7 @@ const Wizard = EmberObject.extend({ return; } - return option.data.name; + return option.label; }, }); diff --git a/app/assets/javascripts/wizard/templates/components/font-previews.hbs b/app/assets/javascripts/wizard/templates/components/font-previews.hbs deleted file mode 100644 index 623118246a0..00000000000 --- a/app/assets/javascripts/wizard/templates/components/font-previews.hbs +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss index 18e96c3c527..d185bc5b091 100644 --- a/app/assets/stylesheets/common/base/discourse.scss +++ b/app/assets/stylesheets/common/base/discourse.scss @@ -90,6 +90,7 @@ h3, h4, h5, h6 { + font-family: $heading-font-family; margin-top: 0; margin-bottom: 0.5rem; } @@ -566,6 +567,8 @@ table { } .control-label { + font-family: $heading-font-family; + font-weight: bold; font-size: $font-up-2; line-height: $line-height-large; diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss index 82692c8db10..021a689a025 100644 --- a/app/assets/stylesheets/common/foundation/variables.scss +++ b/app/assets/stylesheets/common/foundation/variables.scss @@ -48,6 +48,7 @@ $base-font-size: 0.938em !default; // eq. to 15px $base-font-size-larger: 1.063em !default; // eq. to 17px $base-font-size-largest: 1.118em !default; // eq. to 19px $base-font-family: var(--font-family) !default; +$heading-font-family: var(--heading-font-family) !default; // Font-size defintions, multiplier ^ (step / interval) $font-up-6: 2.296em; diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss index 41a94a754f4..18c0af87a8f 100644 --- a/app/assets/stylesheets/wizard.scss +++ b/app/assets/stylesheets/wizard.scss @@ -92,6 +92,10 @@ body.wizard { width: 400px; } +.hidden { + display: none; +} + .wizard-canvas { position: absolute; top: 0; @@ -157,8 +161,7 @@ body.wizard { } } -.wizard-step-colors, -.wizard-step-fonts { +.wizard-step-colors { max-height: 465px; overflow-y: auto; .grid { @@ -203,6 +206,16 @@ body.wizard { } } +.wizard-step-fonts { + .dropdown-field { + float: left; + margin-right: 1.5em; + } + .component-field { + clear: both; + } +} + .wizard-column { position: relative; z-index: 11; diff --git a/config/initializers/014-track-setting-changes.rb b/config/initializers/014-track-setting-changes.rb index 9e0b13c44b4..fed99a618c8 100644 --- a/config/initializers/014-track-setting-changes.rb +++ b/config/initializers/014-track-setting-changes.rb @@ -27,7 +27,7 @@ DiscourseEvent.on(:site_setting_changed) do |name, old_value, new_value| end end - Stylesheet::Manager.clear_core_cache!(["desktop", "mobile"]) if name == :base_font + Stylesheet::Manager.clear_core_cache!(["desktop", "mobile"]) if [:base_font, :heading_font].include?(name) Report.clear_cache(:storage_stats) if [:backup_location, :s3_backup_bucket].include?(name) diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml index 2458646d70c..b70695fec5d 100644 --- a/config/locales/server.en.yml +++ b/config/locales/server.en.yml @@ -2233,7 +2233,8 @@ en: push_notifications_prompt: "Display user consent prompt." push_notifications_icon: "The badge icon that appears in the notification corner. A 96×96 monochromatic PNG with transparency is recommended." - base_font: "Font to use in most places on the site. Themes can override." + base_font: "Base font to use for most text on the site. Themes can override via the `--font-family` CSS custom property." + heading_font: "Font to use for headings on the site. Themes can override via the `--heading-font-family` CSS custom property." short_title: "The short title will be used on the user's home screen, launcher, or other places where space may be limited. It should be limited to 12 characters." @@ -4708,6 +4709,13 @@ en: fonts: title: "Fonts" + fields: + body_font: + label: "Body font" + heading_font: + label: "Heading font" + font_preview: + label: "Preview" logos: title: "Logos" diff --git a/config/site_settings.yml b/config/site_settings.yml index a6902116162..d78463c1254 100644 --- a/config/site_settings.yml +++ b/config/site_settings.yml @@ -329,6 +329,10 @@ basic: default: "helvetica" enum: "BaseFontSetting" refresh: true + heading_font: + default: "helvetica" + enum: "BaseFontSetting" + refresh: true login: invite_only: diff --git a/lib/stylesheet/importer.rb b/lib/stylesheet/importer.rb index 9d4df50db2c..89572f02035 100644 --- a/lib/stylesheet/importer.rb +++ b/lib/stylesheet/importer.rb @@ -41,18 +41,28 @@ module Stylesheet end register_import "font" do - font = DiscourseFonts.fonts.find { |f| f[:key] == SiteSetting.base_font } + body_font = DiscourseFonts.fonts.find { |f| f[:key] == SiteSetting.base_font } + heading_font = DiscourseFonts.fonts.find { |f| f[:key] == SiteSetting.heading_font } + contents = +"" - contents = if font.present? - <<~EOF - #{font_css(font)} + if body_font.present? + contents << <<~EOF + #{font_css(body_font)} :root { - --font-family: #{font[:stack]}; + --font-family: #{body_font[:stack]}; + } + EOF + end + + if heading_font.present? + contents << <<~EOF + #{font_css(heading_font)} + + :root { + --heading-font-family: #{heading_font[:stack]}; } EOF - else - "" end Import.new("font.scss", source: contents) @@ -73,7 +83,10 @@ module Stylesheet contents << font_css(font) contents << <<~EOF - .font-#{font[:key].tr("_", "-")} { + .body-font-#{font[:key].tr("_", "-")} { + font-family: #{font[:stack]}; + } + .heading-font-#{font[:key].tr("_", "-")} h2 { font-family: #{font[:stack]}; } EOF diff --git a/lib/stylesheet/manager.rb b/lib/stylesheet/manager.rb index 816a98ad849..c4a565379d4 100644 --- a/lib/stylesheet/manager.rb +++ b/lib/stylesheet/manager.rb @@ -406,12 +406,13 @@ class Stylesheet::Manager cs = @color_scheme || theme&.color_scheme category_updated = Category.where("uploaded_background_id IS NOT NULL").pluck(:updated_at).map(&:to_i).sum + fonts = "#{SiteSetting.base_font}-#{SiteSetting.heading_font}" if cs || category_updated > 0 theme_color_defs = theme&.resolve_baked_field(:common, :color_definitions) - Digest::SHA1.hexdigest "#{RailsMultisite::ConnectionManagement.current_db}-#{cs&.id}-#{cs&.version}-#{theme_color_defs}-#{Stylesheet::Manager.last_file_updated}-#{category_updated}-#{SiteSetting.base_font}" + Digest::SHA1.hexdigest "#{RailsMultisite::ConnectionManagement.current_db}-#{cs&.id}-#{cs&.version}-#{theme_color_defs}-#{Stylesheet::Manager.last_file_updated}-#{category_updated}-#{fonts}" else - digest_string = "defaults-#{Stylesheet::Manager.last_file_updated}-#{SiteSetting.base_font}" + digest_string = "defaults-#{Stylesheet::Manager.last_file_updated}-#{fonts}" if cdn_url = GlobalSetting.cdn_url digest_string = "#{digest_string}-#{cdn_url}" diff --git a/lib/wizard/builder.rb b/lib/wizard/builder.rb index 7594e54dff5..f89942354d3 100644 --- a/lib/wizard/builder.rb +++ b/lib/wizard/builder.rb @@ -210,18 +210,22 @@ class Wizard end @wizard.append_step('fonts') do |step| - field = step.add_field( - id: 'font_previews', - type: 'component', - value: SiteSetting.base_font - ) + body_font = step.add_field(id: 'body_font', type: 'dropdown', value: SiteSetting.base_font) + heading_font = step.add_field(id: 'heading_font', type: 'dropdown', value: SiteSetting.heading_font) DiscourseFonts.fonts.each do |font| - field.add_choice(font[:key], data: { class: font[:key].tr("_", "-"), name: font[:name] }) + body_font.add_choice(font[:key], label: font[:name]) + heading_font.add_choice(font[:key], label: font[:name]) end + step.add_field( + id: 'font_preview', + type: 'component' + ) + step.on_update do |updater| - updater.update_setting(:base_font, updater.fields[:font_previews]) + updater.update_setting(:base_font, updater.fields[:body_font]) + updater.update_setting(:heading_font, updater.fields[:heading_font]) end end diff --git a/spec/components/stylesheet/importer_spec.rb b/spec/components/stylesheet/importer_spec.rb index 34128a24bf9..54259f131a5 100644 --- a/spec/components/stylesheet/importer_spec.rb +++ b/spec/components/stylesheet/importer_spec.rb @@ -40,8 +40,23 @@ describe Stylesheet::Importer do .to include(":root{--font-family: Helvetica, Arial, sans-serif}") end + it "includes separate body and heading font declarations" do + base_font = DiscourseFonts.fonts[2] + heading_font = DiscourseFonts.fonts[3] + + SiteSetting.base_font = base_font[:key] + SiteSetting.heading_font = heading_font[:key] + + expect(compile_css("desktop")) + .to include(":root{--font-family: #{base_font[:stack]}}") + .and include(":root{--heading-font-family: #{heading_font[:stack]}}") + end + it "includes all fonts in wizard" do - expect(compile_css("wizard").scan(/\.font-/).count) + expect(compile_css("wizard").scan(/\.body-font-/).count) + .to eq(DiscourseFonts.fonts.count) + + expect(compile_css("wizard").scan(/\.heading-font-/).count) .to eq(DiscourseFonts.fonts.count) expect(compile_css("wizard").scan(/@font-face/).count) diff --git a/spec/components/stylesheet/manager_spec.rb b/spec/components/stylesheet/manager_spec.rb index e25c1f8ff0f..f7727ce536b 100644 --- a/spec/components/stylesheet/manager_spec.rb +++ b/spec/components/stylesheet/manager_spec.rb @@ -189,13 +189,18 @@ describe Stylesheet::Manager do expect(digest1).to_not eq(digest2) end - it "updates digest when setting base font" do + it "updates digest when setting fonts" do manager = Stylesheet::Manager.new(:desktop_theme, theme.id) digest1 = manager.color_scheme_digest - SiteSetting.base_font = "nunito" + SiteSetting.base_font = DiscourseFonts.fonts[2][:key] digest2 = manager.color_scheme_digest expect(digest1).to_not eq(digest2) + + SiteSetting.heading_font = DiscourseFonts.fonts[4][:key] + digest3 = manager.color_scheme_digest + + expect(digest3).to_not eq(digest2) end end diff --git a/spec/components/wizard/step_updater_spec.rb b/spec/components/wizard/step_updater_spec.rb index 35a5c05469a..d06dd24660c 100644 --- a/spec/components/wizard/step_updater_spec.rb +++ b/spec/components/wizard/step_updater_spec.rb @@ -168,12 +168,13 @@ describe Wizard::StepUpdater do end context "fonts step" do - it "updates the font" do - updater = wizard.create_updater('fonts', font_previews: 'open_sans') + it "updates fonts" do + updater = wizard.create_updater('fonts', body_font: 'open_sans', heading_font: 'oswald') updater.update expect(updater.success?).to eq(true) expect(wizard.completed_steps?('fonts')).to eq(true) expect(SiteSetting.base_font).to eq('open_sans') + expect(SiteSetting.heading_font).to eq('oswald') end end