Skip to content
This repository has been archived by the owner on Nov 29, 2022. It is now read-only.

Commit

Permalink
v9.3.0 - fixes spacing & zIndex references (#393)
Browse files Browse the repository at this point in the history 
* v9.3.0 - Fix spacing utility values.

* v9.3.0 - Fix up spacing and zindex references.

* v9.3.0 - Fix more references.

* v9.3.0 - Remove unused reference.

Co-authored-by: Damian Mullins <[email protected]>
  • Loading branch information
@kevinrodrigues
kevinrodrigues and Damian Mullins authored Aug 30, 2022
1 parent 912f0cc commit 7f260c2
Show file tree
Hide file tree
Showing 33 changed files with 314 additions and 264 deletions.
8 changes: 8 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,14 @@ Future Todo List
- Make typography and utility classes silent extenders (so that they can be extended by components without importing all utility classes).
- Update to use latest v2 PIE design tokens

v9.3.0
------------------------------
*August 25, 2022*

### Fixed
- `spacing` & `zIndex` references.


v9.2.0
------------------------------
*August 24, 2022*
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "@justeat/fozzie",
"title": "Fozzie – Just Eat UI Web Framework",
"description": "UI Web Framework for the Just Eat Global Platform",
"version": "9.2.0",
"version": "9.3.0",
"main": "dist/js/index.js",
"files": [
"dist/js",
Expand Down Expand Up @@ -42,12 +42,12 @@
"@babel/eslint-parser": "7.18.9",
"@babel/preset-env": "7.18.10",
"@justeat/browserslist-config-fozzie": "2.0.0",
"caniuse-lite": "1.0.30001374",
"@justeat/eslint-config-fozzie": "5.1.0",
"@justeat/f-dom": "1.1.0",
"@justeat/f-logger": "0.8.1",
"@justeat/js-test-buddy": "0.4.1",
"@justeat/stylelint-config-fozzie": "2.3.0",
"caniuse-lite": "1.0.30001374",
"concurrently": "7.3.0",
"coveralls": "3.1.1",
"danger": "11.1.1",
Expand Down
15 changes: 8 additions & 7 deletions src/scss/base/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
@use '../settings/variables' as v;
@use '../settings/include-media' as *;
@use '../tools/mixins/type';
@use '../tools/functions/spacing' as spacing;

@mixin layout() {
/**
Expand Down Expand Up @@ -68,33 +69,33 @@
}

.l-innerContainer--verticalSpacing {
margin: spacing(f) 0;
margin: spacing.spacing(f) 0;

@include media('>=mid') {
margin: spacing(g) auto spacing(h);
margin: spacing.spacing(g) auto spacing.spacing(h);
}

@include media('>=wide') {
margin: spacing(i) auto;
margin: spacing.spacing(i) auto;
}
}

/**
* Layout class for containers that contain content (such as T&cs and Privacy pages)
*/
.l-content {
padding-top: spacing(d);
padding-top: spacing.spacing(d);

@include media('>mid') {
padding-top: spacing(f);
padding-top: spacing.spacing(f);
}
}

.l-content-header {
margin: 0 0 spacing(d);
margin: 0 0 spacing.spacing(d);

@include media('>mid') {
margin: spacing(d) 0 spacing(f);
margin: spacing.spacing(d) 0 spacing.spacing(f);
}

> h1 {
Expand Down
17 changes: 9 additions & 8 deletions src/scss/base/_typography.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@use '../settings/variables' as v;
@use '@justeat/pie-design-tokens/dist/jet' as dt;
@use '../tools/mixins/type';
@use '../tools/functions/spacing' as spacing;
@use '../settings/include-media' as *;

@mixin typography() {
Expand Down Expand Up @@ -49,7 +50,7 @@
*/
p {
@include type.font-size(body-l);
margin-top: spacing(d);
margin-top: spacing.spacing(d);
margin-bottom: 0;
}

Expand Down Expand Up @@ -83,8 +84,8 @@
h1,
.alpha {
@include type.font-size(heading-xl, true, narrow);
margin-top: spacing(f);
margin-bottom: spacing(d);
margin-top: spacing.spacing(f);
margin-bottom: spacing.spacing(d);

@include media('>mid') {
@include type.font-size(heading-xl);
Expand Down Expand Up @@ -125,14 +126,14 @@
// Only give these headings a margin-top if they are after other elements
* + h2,
* + .beta {
margin-top: spacing(f);
margin-top: spacing.spacing(f);
}

* + h3,
* + .gamma,
* + h4,
* + .delta {
margin-top: spacing(d);
margin-top: spacing.spacing(d);
}

small {
Expand Down Expand Up @@ -165,7 +166,7 @@
*/
blockquote {
padding-left: 10px;
margin: spacing(d);
margin: spacing.spacing(d);
border-left: 4px solid lighten(#000, 80%);

p {
Expand Down Expand Up @@ -217,7 +218,7 @@

address {
font-style: normal;
margin-top: spacing(d);
margin-top: spacing.spacing(d);
margin-bottom: 0;
}

Expand All @@ -240,7 +241,7 @@

// Horizontal rules
hr {
margin: spacing(d) 0;
margin: spacing.spacing(d) 0;
border: 0;
border-top: 1px solid dt.$color-divider-default;
}
Expand Down
7 changes: 4 additions & 3 deletions src/scss/components/_alerts.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@use '@justeat/pie-design-tokens/dist/jet' as dt;
@use '../tools/mixins/alerts';
@use '../tools/functions/spacing' as spacing;

@mixin alerts() {
/**
Expand All @@ -22,8 +23,8 @@
// -------------------------

.c-alert {
padding: spacing();
margin-top: spacing(d);
padding: spacing.spacing();
margin-top: spacing.spacing(d);
border: 1px solid transparent;
border-radius: $alert-border-radius;

Expand All @@ -32,7 +33,7 @@
}

& + * {
margin-top: spacing(d);
margin-top: spacing.spacing(d);
}
}

Expand Down
5 changes: 3 additions & 2 deletions src/scss/components/_breadcrumbs.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@use '@justeat/pie-design-tokens/dist/jet' as dt;
@use '../settings/include-media' as *;
@use '../tools/mixins/type';
@use '../tools/functions/spacing' as spacing;

@mixin breadcrumbs() {
/**
Expand Down Expand Up @@ -69,7 +70,7 @@
}

.c-breadcrumb-item-icon {
margin: 0 spacing(b);
margin: 0 spacing.spacing(b);
}

.c-breadcrumb--transparent {
Expand Down Expand Up @@ -100,7 +101,7 @@
background-color: $breadcrumb--compact-background;
border-radius: $breadcrumb-border-radius;
line-height: 2;
padding-right: spacing(d);
padding-right: spacing.spacing(d);

.c-breadcrumb-item-icon {
float: left;
Expand Down
57 changes: 29 additions & 28 deletions src/scss/components/_cards.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@use '@justeat/pie-design-tokens/dist/jet' as dt;
@use '../settings/include-media' as *;
@use '../tools/mixins/truncate';
@use '../tools/functions/spacing' as spacing;

@mixin cards() {
/**
Expand All @@ -19,12 +20,12 @@
$card-bgColor--disabled : dt.$color-container-subtle;
$card-tooltip-width : 10px;
$card-arrow-bottom-position : 0;
$card-padding : spacing(d);
$card-padding : spacing.spacing(d);
$card-radius : dt.$radius-rounded-c;
$card-borderColor : dt.$color-border-default;
$card-info-bgColor--active : dt.$color-support-warning-02;
$card-section-margin : spacing(f);
$card-section-margin--large : spacing(i);
$card-section-margin : spacing.spacing(f);
$card-section-margin--large : spacing.spacing(i);
$card-section-highlight-backgroundColor : dt.$color-support-brand-02;
$card-section-highlight-color : dt.$color-content-default;
$card-section-collapsible-paddingRight : 60px;
Expand All @@ -34,7 +35,7 @@
.c-card {
background-color: $card-bgColor--active;
display: block;
margin-bottom: spacing();
margin-bottom: spacing.spacing();
padding: $card-padding;
position: relative;

Expand Down Expand Up @@ -72,29 +73,29 @@

.c-card--padBottom--belowMid {
@include media('<mid') {
padding-bottom: spacing(f);
padding-bottom: spacing.spacing(f);
}
}

// stretches the card contents outside of their container
.c-card--negativeSpacing {
margin-left: -#{spacing(d)};
margin-right: -#{spacing(d)};
padding-left: spacing(d);
padding-right: spacing(d);
margin-left: -#{spacing.spacing(d)};
margin-right: -#{spacing.spacing(d)};
padding-left: spacing.spacing(d);
padding-right: spacing.spacing(d);
}

.c-card--negativeSpacing--belowMid {
@include media('<mid') {
margin-left: -#{spacing(d)};
margin-right: -#{spacing(d)};
margin-left: -#{spacing.spacing(d)};
margin-right: -#{spacing.spacing(d)};
}
}

.c-card--negativeSpacing--belowMid--small {
@include media('<mid') {
margin-left: -#{spacing()};
margin-right: -#{spacing()};
margin-left: -#{spacing.spacing()};
margin-right: -#{spacing.spacing()};
}
}

Expand Down Expand Up @@ -153,14 +154,14 @@

// creates a section which is separated off by a border on larger screens
.c-card-section {
margin-left: -#{spacing(d)};
padding-left: spacing(d);
margin-left: -#{spacing.spacing(d)};
padding-left: spacing.spacing(d);
width: calc(100% + #{$card-section-margin});

@include media('>=mid') {
border-top: solid 1px $card-borderColor;
margin-left: -#{spacing(d)};
padding-left: spacing(e);
margin-left: -#{spacing.spacing(d)};
padding-left: spacing.spacing(e);
}
}

Expand All @@ -169,8 +170,8 @@
background-color: $card-section-highlight-backgroundColor;
border-top: none;
color: $card-section-highlight-color;
margin-top: spacing(d);
padding: spacing(a) spacing();
margin-top: spacing.spacing(d);
padding: spacing.spacing(a) spacing.spacing();

+ .c-card-section--highlight {
margin-top: 1px;
Expand All @@ -189,7 +190,7 @@

.c-card-section--collapsible {
overflow: hidden;
padding-bottom: spacing(d);
padding-bottom: spacing.spacing(d);
padding-right: $card-section-collapsible-paddingRight;
position: relative;
user-select: none;
Expand All @@ -199,7 +200,7 @@
padding-right: $card-section-collapsible-paddingRight;

&.c-card-section {
margin-bottom: spacing(d);
margin-bottom: spacing.spacing(d);

&.has-noSpacing {
margin-bottom: 0;
Expand All @@ -213,13 +214,13 @@
}

.c-card-section--collapsible--noPad {
margin-left: -#{spacing(f)};
padding: 0 $card-section-collapsible-paddingRight 0 spacing(d);
margin-left: -#{spacing.spacing(f)};
padding: 0 $card-section-collapsible-paddingRight 0 spacing.spacing(d);
width: calc(100% + #{$card-section-margin--large});

@include media('>=mid') {
margin-left: -#{spacing(d)};
padding: 0 $card-section-collapsible-paddingRight 0 spacing(e);
margin-left: -#{spacing.spacing(d)};
padding: 0 $card-section-collapsible-paddingRight 0 spacing.spacing(e);
width: calc(100% + #{$card-section-margin});
}
}
Expand All @@ -242,15 +243,15 @@
height: 6px;
display: none;
position: absolute;
right: spacing(d);
right: spacing.spacing(d);
top: 22px;
transform: rotate(180deg);
transition: transform 0.4s;
width: 10px;

@include media('>=mid') {
height: 8px;
right: spacing(e);
right: spacing.spacing(e);
width: 14px;
}

Expand All @@ -266,7 +267,7 @@
right: 21px;

@include media('>=mid') {
right: spacing(e);
right: spacing.spacing(e);
}
}
}
Expand Down
Loading

0 comments on commit 7f260c2

Please sign in to comment.