Updating stories to reflect removal of bpk-mixins

Skyscanner · Aug 17, 2023 · c92d1e4 · c92d1e4
1 parent 4cb060a
commit c92d1e4
Show file tree

Hide file tree

Showing 13 changed files with 49 additions and 260 deletions.
diff --git a/stories/mixins/typography/typography.js b/stories/mixins/typography/typography.js
diff --git a/stories/mixins/typography/typography.scss b/stories/mixins/typography/typography.scss
diff --git a/stories/mixins/typography/typography.stories.js b/stories/mixins/typography/typography.stories.js
diff --git a/...es/mixins/typography/typography-styles.js → stories/styles.scss b/...es/mixins/typography/typography-styles.js → stories/styles.scss
@@ -16,21 +16,14 @@
  * limitations under the License.
  */
 
-const heroStyles = ['hero-1', 'hero-2', 'hero-3', 'hero-4', 'hero-5'];
-const headingStyles = [
-  'heading-1',
-  'heading-2',
-  'heading-3',
-  'heading-4',
-  'heading-5',
-];
-const bodyStyles = [
-  'subheading',
-  'body-longform',
-  'body-default',
-  'footnote',
-  'caption',
-];
-const labelStyles = ['label-1', 'label-2', 'label-3'];
+@import '../packages/bpk-foundations-web/tokens/base.default.scss';
 
-export { heroStyles, headingStyles, bodyStyles, labelStyles };
+@mixin bpk-caption {
+  font-size: $bpk-font-size-xs;
+  line-height: $bpk-line-height-xs;
+  font-weight: $bpk-font-weight-book;
+}
+
+@mixin bpk-border-sm($color) {
+  box-shadow: 0 0 0 $bpk-border-size-sm $color inset;
+}
diff --git a/stories/svgs/icons/icons.scss b/stories/svgs/icons/icons.scss
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '../../../packages/bpk-mixins/index.scss';
+@import '../../styles.scss';
 
 .bpk-icon-container {
   display: flex;

diff --git a/stories/svgs/spinners/spinners.scss b/stories/svgs/spinners/spinners.scss
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '../../../packages/bpk-mixins/index.scss';
+@import '../../styles.scss';
 
 .bpk-spinner-container {
   display: flex;
@@ -26,14 +26,18 @@
 }
 
 .bpk-spinner-swatch {
-  @include bpk-spinner();
+  width: bpk-spacing-base();
+  height: bpk-spacing-base();
+  animation: bpk-keyframe-spin 600ms linear infinite;
 
   &--lg {
-    @include bpk-spinner--lg();
+    width: bpk-spacing-lg();
+    height: bpk-spacing-lg();
   }
 
   &--xl {
-    @include bpk-spinner--xl();
+    width: bpk-spacing-xl();
+    height: bpk-spacing-xl();
   }
 }
 

diff --git a/stories/tokens/animations/animations.scss b/stories/tokens/animations/animations.scss
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '../../../packages/bpk-mixins/index.scss';
+@import '../../styles.scss';
 
 .bpk-animation-container {
   margin: bpk-spacing-lg();

diff --git a/stories/tokens/borders/borders.scss b/stories/tokens/borders/borders.scss
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '../../../packages/bpk-mixins/index.scss';
+@import '../../styles.scss';
 
 .bpk-border-container {
   display: flex;

diff --git a/stories/tokens/breakpoints/breakpoints.scss b/stories/tokens/breakpoints/breakpoints.scss
@@ -16,31 +16,30 @@
  * limitations under the License.
  */
 
- @import '../../../packages/bpk-mixins/index.scss';
+@import '../../styles.scss';
 
- .bpk-breakpoint-container {
-      padding-bottom: bpk-spacing-base();
- }
+.bpk-breakpoint-container {
+  padding-bottom: bpk-spacing-base();
+}
 
- .bpk-breakpoint-object {
-      align-items: center;
-      background-color: $bpk-status-danger-spot-day;
-      height: $bpk-one-pixel-rem;
-  }
+.bpk-breakpoint-object {
+  align-items: center;
+  background-color: $bpk-status-danger-spot-day;
+  height: $bpk-one-pixel-rem;
+}
 
-  .bpk-breakpoint-margin-object {
-      background-color: $bpk-status-warning-fill-day;
-  }
+.bpk-breakpoint-margin-object {
+  background-color: $bpk-status-warning-fill-day;
+}
 
-  .bpk-breakpoint-margin-container {
-      display: flex;
-      justify-content: space-between;
-  }
-
- .bpk-breakpoint-name {
-      margin-top: bpk-spacing-base();
-      font-family: 'Space Mono', monospace;
-
-      @include bpk-caption;
- }
-
+.bpk-breakpoint-margin-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.bpk-breakpoint-name {
+  margin-top: bpk-spacing-base();
+  font-family: 'Space Mono', monospace;
+
+  @include bpk-caption;
+}
diff --git a/stories/tokens/colors/colors.scss b/stories/tokens/colors/colors.scss
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '../../../packages/bpk-mixins/index.scss';
+@import '../../styles.scss';
 
 .bpk-color-container {
   width: bpk-spacing-md() * 19;

diff --git a/stories/tokens/radii/radii.scss b/stories/tokens/radii/radii.scss
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '../../../packages/bpk-mixins/index.scss';
+@import '../../styles.scss';
 
 .bpk-radius-container {
   margin: bpk-spacing-lg();
@@ -26,7 +26,7 @@
   width: bpk-spacing-xxl() * 4;
   height: bpk-spacing-xxl() * 4;
 
-  @include bpk-box-shadow-lg();
+  box-shadow: $bpk-box-shadow-lg;
 }
 
 .bpk-radius-name {

diff --git a/stories/tokens/shadows/shadows.scss b/stories/tokens/shadows/shadows.scss
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
- @import '../../../packages/bpk-mixins/index.scss';
+ @import '../../styles.scss';
 
  .bpk-shadow-container {
     margin: bpk-spacing-lg();