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

chore(packages): copy changes to packages #421

Merged
merged 1 commit into from
Jan 11, 2018
Merged

chore(packages): copy changes to packages #421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/all/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"@govuk-frontend/back-link": "^0.0.19-alpha",
"@govuk-frontend/breadcrumbs": "^0.0.19-alpha",
"@govuk-frontend/button": "^0.0.19-alpha",
"@govuk-frontend/checkbox": "^0.0.19-alpha",
"@govuk-frontend/checkboxes": "^0.0.20-alpha",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this bump intentional when renaming?

Copy link
Member Author

@hannalaakso hannalaakso Jan 10, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As far as npm is concerned, we've published a new package, not renamed one.

@NickColley was looking into this and added a note to dev time to discuss how we should handle removing npm packages such as govuk-frontend/checkbox

"@govuk-frontend/cookie-banner": "^0.0.19-alpha",
"@govuk-frontend/date-input": "^0.0.19-alpha",
"@govuk-frontend/details": "^0.0.19-alpha",
Expand All @@ -21,7 +21,7 @@
"@govuk-frontend/panel": "^0.0.19-alpha",
"@govuk-frontend/phase-banner": "^0.0.19-alpha",
"@govuk-frontend/previous-next": "^0.0.19-alpha",
"@govuk-frontend/radios": "^0.0.19-alpha",
"@govuk-frontend/radios": "^0.0.20-alpha",
"@govuk-frontend/select": "^0.0.19-alpha",
"@govuk-frontend/skip-link": "^0.0.19-alpha",
"@govuk-frontend/table": "^0.0.19-alpha",
Expand Down
45 changes: 12 additions & 33 deletions packages/back-link/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
<div class="govuk-o-width-container">

<div class="govuk-o-main-wrapper">

# Back link

## Introduction
Expand Down Expand Up @@ -34,32 +30,28 @@ To consume the back-link component you must be running npm version 5 or above.

## Installation

npm install --save @govuk-frontend/back-link
npm install --save @govuk-frontend/back-link

## Requirements

### Build tool configuration

When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp

<pre> `.pipe(sass({
.pipe(sass({
includePaths: 'node_modules/'
}))`
</pre>
}))

### Static asset path configuration

To show the button image you need to configure your app to show these assets. Below is a sample configuration using Express js:

<pre> `app.use('/public', express.static(path.join(__dirname, '/node_modules/@govuk-frontend/icons')))`
</pre>
app.use('/public', express.static(path.join(__dirname, '/node_modules/@govuk-frontend/icons')))

## Component arguments

If you are using Nunjucks,then macros take the following arguments

<div>

<table class="govuk-c-table">

<thead class="govuk-c-table__head">
Expand Down Expand Up @@ -144,43 +136,30 @@ If you are using Nunjucks,then macros take the following arguments

</table>

</div>

### Setting up Nunjucks views and paths

Below is an example setup using express configure views:

<pre> `nunjucks.configure('node_modules/@govuk-frontend`, {
autoescape: true,
cache: false,
express: app
})`
</pre>
nunjucks.configure('node_modules/@govuk-frontend', {
autoescape: true,
cache: false,
express: app
})

## Getting updates

To check whether you have the latest version of the button run:

npm outdated @govuk-frontend/back-link
npm outdated @govuk-frontend/back-link

To update the latest version run:

npm update @govuk-frontend/back-link
npm update @govuk-frontend/back-link

## Contribution

Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")

## Acknowledgements/credits

* GDS developers
* Jani Kraner
* Gemma Leigh

## License

MIT

</div>

</div>
MIT
45 changes: 12 additions & 33 deletions packages/breadcrumbs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
<div class="govuk-o-width-container">

<div class="govuk-o-main-wrapper">

# Breadcrumbs

## Introduction
Expand Down Expand Up @@ -210,32 +206,28 @@ Please note, this component depends on @govuk-frontend/globals and @govuk-fronte

## Installation

npm install --save @govuk-frontend/breadcrumbs
npm install --save @govuk-frontend/breadcrumbs

## Requirements

### Build tool configuration

When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp

<pre> `.pipe(sass({
.pipe(sass({
includePaths: 'node_modules/'
}))`
</pre>
}))

### Static asset path configuration

To show the button image you need to configure your app to show these assets. Below is a sample configuration using Express js:

<pre> `app.use('/public', express.static(path.join(__dirname, '/node_modules/@govuk-frontend/icons')))`
</pre>
app.use('/public', express.static(path.join(__dirname, '/node_modules/@govuk-frontend/icons')))

## Component arguments

If you are using Nunjucks,then macros take the following arguments

<div>

<table class="govuk-c-table">

<thead class="govuk-c-table__head">
Expand Down Expand Up @@ -332,43 +324,30 @@ If you are using Nunjucks,then macros take the following arguments

</table>

</div>

### Setting up Nunjucks views and paths

Below is an example setup using express configure views:

<pre> `nunjucks.configure('node_modules/@govuk-frontend`, {
autoescape: true,
cache: false,
express: app
})`
</pre>
nunjucks.configure('node_modules/@govuk-frontend', {
autoescape: true,
cache: false,
express: app
})

## Getting updates

To check whether you have the latest version of the button run:

npm outdated @govuk-frontend/breadcrumbs
npm outdated @govuk-frontend/breadcrumbs

To update the latest version run:

npm update @govuk-frontend/breadcrumbs
npm update @govuk-frontend/breadcrumbs

## Contribution

Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")

## Acknowledgements/credits

* GDS developers
* Jani Kraner
* Gemma Leigh

## License

MIT

</div>

</div>
MIT
93 changes: 80 additions & 13 deletions packages/breadcrumbs/_breadcrumbs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,22 @@
@import "@govuk-frontend/globals/common";

@include exports("breadcrumbs") {

// Size of chevron (excluding border)
$chevron-size: 7px;

// Size of chevron border
$chevron-border-width: 1px;

// Colour of chevron
$chevron-border-colour: $govuk-secondary-text-colour;

// Calculated altitude (△↕) of the right-angled isosceles chevron with sides
// of length 8 (7px + 1px border):
//
// √(8² + 8²) * 0.5 ≅ 5.655
$chevron-altitude-calculated: 5.655px;

.govuk-c-breadcrumbs {
@include govuk-font-regular-16;
@include govuk-text-colour;
Expand All @@ -18,26 +34,77 @@
}

.govuk-c-breadcrumbs__list-item {

display: inline-block;
position: relative;

margin-bottom: $govuk-spacing-scale-1;

// Add both margin and padding such that the chevron appears centrally
// between each breadcrumb item
margin-left: $govuk-spacing-scale-2;
padding-left: $govuk-spacing-scale-3;
padding-left: $govuk-spacing-scale-2 + $chevron-altitude-calculated;

float: left;
background-image: file-url("separator.png");
}

// Create a chevron using a box with borders on two sides, rotated 45deg.
.govuk-c-breadcrumbs__list-item:before {
content: "";
display: block;

position: absolute;

// Begin adjustments for font baseline offset
// These should be reverted when the font is updated with the correct
// baseline

@include govuk-h-device-pixel-ratio {
background-image: file-url("separator-2x.png");
background-size: 6px 11px;
// top: 0;
// bottom: 0;

top: -1px;
bottom: 1px;

// End adjustments for font baseline offset

// Offset by the difference between the width of the non-rotated square
// and its width when rotated
left: (($chevron-altitude-calculated * -2) + $chevron-size + $chevron-border-width);

width: $chevron-size;
height: $chevron-size;

margin: auto 0;

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

border: solid;
border-width: $chevron-border-width $chevron-border-width 0 0;
border-color: $chevron-border-colour;

// Fall back to a greater than sign for IE8
@include ie(8) {
content: "\003e"; // Greater than sign (>)
width: auto;
height: auto;
border: 0;
color: $chevron-border-colour;
}
}

background-repeat: no-repeat;
background-position: 0% 50%;
}
.govuk-c-breadcrumbs__list-item:first-child {
margin-left: 0;
padding-left: 0;
}

.govuk-c-breadcrumbs__list-item:first-child {
margin-left: 0;
padding-left: 0;
background-image: none;
}
.govuk-c-breadcrumbs__list-item:first-child:before {
content: none;
display: none;
}
.govuk-c-breadcrumbs__link:link,
.govuk-c-breadcrumbs__link:visited,
.govuk-c-breadcrumbs__link:hover,
Expand Down
Loading