Skip to content

Commit

Permalink
Merge pull request #4 from x-govuk/move-macro-into-component-folder
Browse files Browse the repository at this point in the history
Move macro into component folder
vickytnz authored Sep 9, 2024

Verified

This commit was signed with the committer’s verified signature.
xu-cheng Cheng Xu
2 parents 25510cf + 6b78660 commit f085a76
Showing 6 changed files with 74 additions and 150 deletions.
33 changes: 33 additions & 0 deletions app/_components/example/_example.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
.app-example__frame {
background: govuk-colour("white");
border: 0;
border-right: 1px solid $govuk-border-colour;
display: block;
max-width: calc(100% - govuk-spacing(4) * 2);
padding: govuk-spacing(4);
resize: both;
width: 100%;
}

.app-example__new-window {
@include govuk-font($size: 16);
}

.app-example__tabs {
.govuk-tabs__panel[id$="-preview"] {
background: govuk-colour("light-grey");
padding: 0;
}

.x-govuk-code {
margin: 0;
}
}

// stylelint-disable declaration-no-important
.app-example__toolbar {
background: $govuk-body-background-colour;
border-top: 1px solid $govuk-border-colour;
max-width: initial !important;
padding: govuk-spacing(2);
}
3 changes: 3 additions & 0 deletions app/_components/example/macro.njk
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{% macro example(link) %}
{%- include "./template.njk" -%}
{% endmacro %}
34 changes: 34 additions & 0 deletions app/_components/example/template.njk
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<div class="govuk-tabs app-example__tabs" data-module="govuk-tabs">
<h2 class="govuk-tabs__title">
Contents
</h2>
<ul class="govuk-tabs__list">
<li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
<a class="govuk-tabs__tab" href="#{{ link | replace("/", "-") }}-preview">
Example
</a>
</li>
<li class="govuk-tabs__list-item">
<a class="govuk-tabs__tab" href="#{{ link | replace("/", "-") }}-html">
HTML
</a>
</li>
<li class="govuk-tabs__list-item">
<a class="govuk-tabs__tab" href="#{{ link | replace("/", "-") }}-nunjucks">
Nunjucks
</a>
</li>
</ul>
<div class="govuk-tabs__panel" id="{{ link | replace("/", "-") }}-preview">
<iframe class="app-example__frame" data-module="app-example-frame" src="../{{ link }}"></iframe>
<p class="app-example__toolbar">
<a class="app-example__new-window" href="../{{ link }}" target="_blank">Open this example in a new tab</a>
</p>
</div>
<div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="{{ link | replace("/", "-") }}-html">
{{ getHtmlCode(link) }}
</div>
<div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="{{ link | replace("/", "-") }}-nunjucks">
{{ getNunjucksCode(link) }}
</div>
</div>
42 changes: 1 addition & 41 deletions app/_layouts/example.njk
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{% extends "layouts/sub-navigation.njk" %}
{% from "example/macro.njk" import example %}

{% block beforeContent %}
{{ govukBreadcrumbs({
@@ -107,47 +108,6 @@
</ol>


{% macro example(link)%}


<div class="govuk-tabs app-example__tabs" data-module="govuk-tabs">
<h2 class="govuk-tabs__title">
Contents
</h2>
<ul class="govuk-tabs__list">
<li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
<a class="govuk-tabs__tab" href="#{{ link | replace("/", "-") }}-preview">
Example
</a>
</li>
<li class="govuk-tabs__list-item">
<a class="govuk-tabs__tab" href="#{{ link | replace("/", "-") }}-html">
HTML
</a>
</li>
<li class="govuk-tabs__list-item">
<a class="govuk-tabs__tab" href="#{{ link | replace("/", "-") }}-nunjucks">
Nunjucks
</a>
</li>
</ul>
<div class="govuk-tabs__panel" id="{{ link | replace("/", "-") }}-preview">
<iframe class="app-example__frame" data-module="app-example-frame" src="../{{ link }}"></iframe>
<p class="app-example__toolbar">
<a class="app-example__new-window" href="../{{ link }}" target="_blank">Open this example in a new tab</a>
</p>
</div>
<div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="{{ link | replace("/", "-") }}-html">
{{ getHtmlCode(link) }}
</div>
<div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="{{ link | replace("/", "-") }}-nunjucks">
{{ getNunjucksCode(link) }}
</div>
</div>

{% endmacro %}


{% for i in mistake %}

{% if loop.index0 == 0 %}
108 changes: 1 addition & 107 deletions app/sass/_settings.scss
Original file line number Diff line number Diff line change
@@ -13,6 +13,7 @@ $govuk-page-width: 1100px;
// Add extra styles here

@import "node_modules/govuk-frontend/dist/govuk/all";
@import "app/_components/example/example";

/*
*, body, h1, h2, h3, h4, h5, p, a, span, .govuk-heading-m, .govuk-heading-l, .govuk-heading-xl, .govuk-heading-s, .govuk-list, .govuk-fieldset__legend, .govuk-label, .govuk-hint, html, body, form, fieldset, table, tr, td, img, button {
@@ -87,81 +88,7 @@ padding-top: 11px !important;
}


/// app examples
// Example styles
.app-example-wrapper {
@include govuk-responsive-margin(6, "top");
@include govuk-responsive-margin(6, "bottom");
border: 1px solid $govuk-border-colour;
border-top: 0;
max-width: auto;
// max-width: 38em; //added to match with 'prose' examples

}

.app-example {
@include govuk-font-size($size: 16);
position: relative;
border-top: 1px solid $govuk-border-colour;
// Add a 'checkerboard' background
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQoU2P88ePHfwY0wMHBwYguxjgUFKI7GsTH5m4M3w1ChQAZTSeO0/AZpgAAAABJRU5ErkJggg==")
repeat;
}

.app-example--tabs {
@include govuk-responsive-margin(0, "bottom");
}

.app-example__toolbar {
padding: 10px;
border-bottom: 1px solid $govuk-border-colour;
background: $govuk-body-background-colour;
}

.app-example__frame {
display: block;
width: 100%;
max-width: 100%;
border: 0;
border-right: 1px solid $govuk-border-colour;
background: govuk-colour("white");
}

// Default size
.app-example__frame,
.app-example__frame--xs {
height: 150px;
}

.app-example__frame--s {
height: 250px;
}

.app-example__frame--m {
height: 350px;
}

.app-example__frame--l {
height: 450px;
}

.app-example__frame--xl {
height: 550px;
}

.app-example__frame--resizable {
min-width: 230px;
min-height: govuk-spacing(6) * 2;
overflow: auto;
transform: translate3d(0, 0, 0);
@include govuk-media-query($from: desktop) {
resize: both;
}
}

.app-example__code {
position: relative;
}


// =========================================================
@@ -345,39 +272,6 @@ padding-top: 11px !important;
}


.app-example__frame {
background: govuk-colour("white");
border: 0;
border-right: 1px solid $govuk-border-colour;
display: block;
max-width: calc(100% - govuk-spacing(4) * 2);
padding: govuk-spacing(4);
resize: both;
width: 100%;
}

.app-example__new-window {
@include govuk-font($size: 16);
}

// stylelint-disable declaration-no-important
.app-example__toolbar {
background: $govuk-body-background-colour;
border-top: 1px solid $govuk-border-colour;
max-width: initial !important;
padding: govuk-spacing(2);
}

.app-example__tabs {
.govuk-tabs__panel[id$="-preview"] {
padding: 0;
}

.x-govuk-code {
margin: 0;
}
}


// overwriting mistakes

4 changes: 2 additions & 2 deletions eleventy.config.js
Original file line number Diff line number Diff line change
@@ -152,8 +152,8 @@ module.exports = function(eleventyConfig) {
input: 'app',
// Use layouts from the plugin
//layouts: '../node_modules/@x-govuk/govuk-eleventy-plugin/layouts',
layouts: "_layouts" /* ,
includes: '_components' */
layouts: "_layouts",
includes: '_components'
},
pathPrefix: process.env.GITHUB_ACTIONS ? '/govuk-accessibility-mistakes-forms/' : '/'

0 comments on commit f085a76

Please sign in to comment.