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

Commit

Permalink
v10.4.0 - Unify function namespace. (#401)
Browse files Browse the repository at this point in the history 
* v10.4.0 - Unify function namespace.

* v10.4.0 - Unify function namespace.
  • Loading branch information
@kevinrodrigues
kevinrodrigues authored Sep 27, 2022
1 parent e430b6a commit 160805f
Show file tree
Hide file tree
Showing 34 changed files with 277 additions and 280 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

v10.4.0
------------------------------
*September 27, 2022*

### Changed
- Unify namespaced `function` references throughout.


v10.3.0
------------------------------
*September 26, 2022*
Expand Down
2 changes: 1 addition & 1 deletion 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": "10.3.0",
"version": "10.4.0",
"main": "dist/js/index.js",
"files": [
"dist/js",
Expand Down
16 changes: 8 additions & 8 deletions src/scss/base/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@use '../settings/variables' as v;
@use '../settings/include-media' as *;
@use '../tools/mixins/type';
@use '../tools/functions/spacing' as spacing;
@use '../tools/functions/index' as functions;

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

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

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

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

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

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

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

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

> h1 {
Expand Down
18 changes: 9 additions & 9 deletions src/scss/base/_typography.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +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 '../tools/functions/index' as functions;
@use '../settings/include-media' as *;

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

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

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

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

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

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

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

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

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

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

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

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

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

Expand Down
6 changes: 3 additions & 3 deletions src/scss/components/_breadcrumbs.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +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;
@use '../tools/functions/index' as functions;

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

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

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

.c-breadcrumb-item-icon {
float: left;
Expand Down
58 changes: 29 additions & 29 deletions src/scss/components/_cards.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +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;
@use '../tools/functions/index' as functions;

@mixin cards() {
/**
Expand All @@ -20,12 +20,12 @@
$card-bgColor--disabled : dt.$color-container-subtle;
$card-tooltip-width : 10px;
$card-arrow-bottom-position : 0;
$card-padding : spacing.spacing(d);
$card-padding : functions.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.spacing(f);
$card-section-margin--large : spacing.spacing(i);
$card-section-margin : functions.spacing(f);
$card-section-margin--large : functions.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 @@ -35,7 +35,7 @@
.c-card {
background-color: $card-bgColor--active;
display: block;
margin-bottom: spacing.spacing();
margin-bottom: functions.spacing();
padding: $card-padding;
position: relative;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0 comments on commit 160805f

Please sign in to comment.