@phillips/seldon 1.38.1 → 1.38.2

package/README.md

@@ -20,10 +20,11 @@ yarn add @phillips/seldon
 
 ### Styling
 
-The project contains a `scss` folder. Here you will find the main export of our sass styles. This will include all the styles bundled with this package, including resets and typography styles.
+The project contains a `scss` folder. Here you will find the main export of our sass styles for our components. There's also a scss export that contains our mixins, tokens, and other utilities.
 
 ```scss
-@use '@phillips/seldon/dist/scss/styles';
+@use '@phillips/seldon/dist/scss/componentStyles'; // our component tyles
+@use '@phillips/seldon/dist/scss/allPartials'; // our scss utilities
 ```
 
 If you wish to only import specific component styles you can find them in their respective directories inside the `scss` folder.

package/dist/scss/_allPartials.scss

@@ -0,0 +1,5 @@
+@forward './sharedClasses';
+@forward './type';
+@forward './typography';
+@forward './utils';
+@forward './vars';

package/dist/scss/_sharedClasses.scss

@@ -1,4 +1,5 @@
-@import './_utils';
+@use './vars' as *;
+@use './utils' as *;
 
 // I think this is pretty tailwindy to generate these common classes
 @each $direction in 'vertical', 'horizontal' {

package/dist/scss/_type.scss

@@ -1,4 +1,4 @@
-@import './vars';
+@use './vars' as *;
 
 @mixin underline($padding: 0, $width: 0.0625rem, $color: $cta-blue) {
   border-bottom: $width solid $color;

package/dist/scss/_typography.scss

@@ -1,4 +1,4 @@
-@import './vars';
+@use './vars' as *;
 
 html,
 body {

package/dist/scss/_utils.scss

@@ -1,5 +1,5 @@
 @use 'sass:string';
-@import './vars';
+@use './vars' as *;
 
 @mixin hidden {
   block-size: 1px;

package/dist/scss/componentStyles.scss

@@ -0,0 +1,35 @@
+// 🌎 Globals
+
+// @TODO: reset styles when we can do a site wide regressions QA in phillips-public
+// @use 'reset';
+
+// ⚛️ Components
+@use 'components/Button/button';
+@use 'components/IconButton/iconButton';
+@use 'components/Footer/footer';
+@use 'components/Grid/grid';
+@use 'components/Header/header';
+@use 'components/HeroBanner/heroBanner';
+@use 'components/Navigation/navigation';
+@use 'components/Navigation/NavigationItem/navigationItem';
+@use 'components/Navigation/NavigationItemTrigger/navigationItemTrigger';
+@use 'components/Navigation/NavigationList/navigationList';
+@use 'components/Input/input';
+@use 'components/Row/row';
+@use 'components/GridItem/gridItem';
+@use 'components/Search/search';
+@use 'components/Social/social';
+@use 'components/SplitPanel/splitPanel';
+@use 'components/Subscribe/subscribe';
+@use 'components/Toggle/toggle';
+@use 'components/UserManagement/userManagement';
+@use 'components/ViewingsList/viewingsList';
+@use 'components/Link/link';
+@use 'components/LinkBlock/linkBlock';
+@use 'components/LinkList/linkList';
+@use 'components/Text/text';
+@use 'components/Modal/modal';
+@use 'components/Accordion/accordion';
+@use 'components/Breadcrumb/breadcrumb';
+@use 'components/Drawer/drawer';
+@use 'components/HTMLParser/htmlParser';

package/dist/scss/components/Accordion/_accordion.scss

@@ -1,4 +1,4 @@
-@import '../../_vars';
+@use '../../allPartials' as *;
 
 .#{$px}-accordion {
   border-bottom: 1px solid $keyline-gray;

package/dist/scss/components/Breadcrumb/_breadcrumb.scss

@@ -1,4 +1,4 @@
-@import '../../_vars';
+@use '../../allPartials' as *;
 
 .#{$px}-breadcrumb {
   @include text($body3);

package/dist/scss/components/Button/_button.scss

@@ -1,6 +1,4 @@
-@import '../../vars';
-@import '../../typography';
-@import '../../utils';
+@use '../../allPartials' as *;
 
 .#{$px}-button {
   @include bodyText;

package/dist/scss/components/DatePicker/_datePicker.scss

@@ -1,7 +1,6 @@
 /* stylelint-disable selector-class-pattern */
+@use '../../allPartials' as *;
 @import 'flatpickr/dist/flatpickr.css';
-@import '../../vars';
-@import '../../typography';
 
 .flatpickr-calendar {
   @include DistinctText;

package/dist/scss/components/Footer/_footer.scss

@@ -1,7 +1,4 @@
-@import '../../vars';
-@import '../../utils';
-@import '../../type';
-@import '../../typography';
+@use '../../allPartials' as *;
 
 .#{$px}-footer {
   background-color: $off-white;

package/dist/scss/components/Grid/_grid.scss

@@ -1,5 +1,4 @@
-@import '../../vars';
-@import '../../utils';
+@use '../../allPartials' as *;
 
 .#{$px}-grid {
   @include gridContainer(false);

package/dist/scss/components/GridItem/_gridItem.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@import '../../_utils';
+@use '../../allPartials' as *;
 
 @mixin gridItemColumnSpan($span: 1, $total-cols: 12) {
   grid-column: span $span;

package/dist/scss/components/HTMLParser/_htmlParser.scss

@@ -1,3 +1,5 @@
+@use '../../allPartials' as *;
+
 .#{$px}-html-parser {
   width: 100%;
 }

package/dist/scss/components/Header/_header.scss

@@ -1,5 +1,4 @@
-@import '../../vars';
-@import '../../utils';
+@use '../../allPartials' as *;
 
 .#{$px}-header {
   align-items: center;

package/dist/scss/components/HeroBanner/_heroBanner.scss

@@ -1,4 +1,4 @@
-@import '../../vars';
+@use '../../allPartials' as *;
 
 .#{$px}-hero-banner {
   align-items: center;

package/dist/scss/components/IconButton/_iconButton.scss

@@ -1,3 +1,5 @@
+@use '../../allPartials' as *;
+
 .#{$px}-icon-button {
   background-color: unset;
   border: unset;

package/dist/scss/components/Input/_input.scss

@@ -1,5 +1,4 @@
-@import '../../vars';
-@import '../../utils';
+@use '../../allPartials' as *;
 
 $md: #{$px}-input--md;
 $lg: #{$px}-input--lg;

package/dist/scss/components/Link/_link.scss

@@ -1,4 +1,4 @@
-@import '../../type';
+@use '../../allPartials' as *;
 
 .#{$px}-link {
   color: $cta-blue;

package/dist/scss/components/LinkBlock/_linkBlock.scss

@@ -1,5 +1,4 @@
-@import '../../type';
-@import '../../vars';
+@use '../../allPartials' as *;
 
 .#{$px}-link-block {
   align-items: center;

package/dist/scss/components/LinkList/_linkList.scss

@@ -1,4 +1,4 @@
-@import '../../_utils';
+@use '../../allPartials' as *;
 
 .#{$px}-link-list {
   &--item {

package/dist/scss/components/Modal/_modal.scss

@@ -1,5 +1,4 @@
-@import '../../vars';
-@import '../../utils';
+@use '../../allPartials' as *;
 
 .#{$px}-modal {
   background-color: white;

package/dist/scss/components/Navigation/NavigationItem/_navigationItem.scss

@@ -1,6 +1,4 @@
-@import '../../../vars';
-@import '../../../utils';
-@import '../../../typography';
+@use '../../../allPartials' as *;
 
 .#{$px}-nav__item {
   @include isHeaderMobile {

package/dist/scss/components/Navigation/NavigationItemTrigger/_navigationItemTrigger.scss

@@ -1 +1 @@
-@import '../../../vars';
+@use '../../../allPartials' as *;

package/dist/scss/components/Navigation/NavigationList/_navigationList.scss

@@ -1,5 +1,4 @@
-@import '../../../vars';
-@import '../../../utils';
+@use '../../../allPartials' as *;
 
 .#{$px}-nav__list {
   display: flex;

package/dist/scss/components/Navigation/_navigation.scss

@@ -1,5 +1,4 @@
-@import '../../vars';
-@import '../../utils';
+@use '../../allPartials' as *;
 
 .#{$px}-nav {
   background: $off-white;

package/dist/scss/components/Row/_row.scss

@@ -1,4 +1,4 @@
-@import '../../_vars';
+@use '../../allPartials' as *;
 
 .#{$px}-row {
   // horizontal padding is fixed

package/dist/scss/components/Search/_search.scss

@@ -1,6 +1,4 @@
-@import '../../vars';
-@import '../../typography';
-@import '../../utils';
+@use '../../allPartials' as *;
 
 .#{$px}-search {
   align-items: center;

package/dist/scss/components/Social/_social.scss

@@ -1,6 +1,4 @@
-@import '../../vars';
-@import '../../utils';
-@import '../../type';
+@use '../../allPartials' as *;
 
 .#{$px}-social {
   display: inline-flex;

package/dist/scss/components/SplitPanel/_splitPanel.scss

@@ -1,5 +1,4 @@
-@import '../../vars';
-@import '../../utils';
+@use '../../allPartials' as *;
 
 .#{$px}-split-panel {
   align-items: center;

package/dist/scss/components/SplitPanel/_splitPanel.stories.scss

@@ -1,4 +1,4 @@
-@import '../../vars';
+@use '../../allPartials' as *;
 
 .split-panel-story {
   background-color: #f4f2f1;

package/dist/scss/components/Subscribe/_subscribe.scss

@@ -1,7 +1,4 @@
-@import '../../vars';
-@import '../../utils';
-@import '../../type';
-@import '../../typography';
+@use '../../allPartials' as *;
 
 .#{$px}-subscribe {
   max-width: 600px;

package/dist/scss/components/Text/_text.scss

@@ -1,4 +1,4 @@
-@import '../../_vars';
+@use '../../allPartials' as *;
 
 .#{$px}-text {
   @each $variant in $text-tokens {

package/dist/scss/components/Toggle/_toggle.scss

@@ -1,5 +1,4 @@
-@import '../../vars';
-@import '../../utils';
+@use '../../allPartials' as *;
 
 $toggleBaseWidth: 3rem;
 $inline: #{$px}-input--inline;

package/dist/scss/components/UserManagement/_userManagement.scss

@@ -1,5 +1,4 @@
-@import '../../_vars';
-@import '../../_utils';
+@use '../../allPartials' as *;
 
 .#{$px}-user-management {
   align-items: center;

package/dist/scss/components/ViewingsList/_viewingsList.scss

@@ -1,6 +1,4 @@
-@import '../../vars';
-@import '../../utils';
-@import '../../typography';
+@use '../../allPartials' as *;
 
 .#{$px}-viewings-list {
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.38.1",
+  "version": "1.38.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"

package/dist/scss/styles.scss

@@ -1,42 +0,0 @@
-// 🌎 Globals
-@import './vars';
-
-// @TODO: add styles when we can do a site wide regressions QA
-
-// @use 'reset';
-@import './typography';
-@import './sharedClasses';
-
-// 📑 Pages
-@import 'pages/page';
-
-// ⚛️ Components
-@import 'components/Button/button';
-@import 'components/IconButton/iconButton';
-@import 'components/Footer/footer';
-@import 'components/Grid/grid';
-@import 'components/Header/header';
-@import 'components/HeroBanner/heroBanner';
-@import 'components/Navigation/navigation';
-@import 'components/Navigation/NavigationItem/navigationItem';
-@import 'components/Navigation/NavigationItemTrigger/navigationItemTrigger';
-@import 'components/Navigation/NavigationList/navigationList';
-@import 'components/Input/input';
-@import 'components/Row/row';
-@import 'components/GridItem/gridItem';
-@import 'components/Search/search';
-@import 'components/Social/social';
-@import 'components/SplitPanel/splitPanel';
-@import 'components/Subscribe/subscribe';
-@import 'components/Toggle/toggle';
-@import 'components/UserManagement/userManagement';
-@import 'components/ViewingsList/viewingsList';
-@import 'components/Link/link';
-@import 'components/LinkBlock/linkBlock';
-@import 'components/LinkList/linkList';
-@import 'components/Text/text';
-@import 'components/Modal/modal';
-@import 'components/Accordion/accordion';
-@import 'components/Breadcrumb/breadcrumb';
-@import 'components/Drawer/drawer';
-@import 'components/HTMLParser/htmlParser';