@bloom-housing/ui-components 10.0.4 → 10.0.6

package/dist/src/navigation/LanguageNav.stories.d.ts

@@ -1,6 +1,10 @@
+import { BADGES } from "../../.storybook/constants";
 declare const _default: {
     title: string;
     decorators: ((...args: any) => any)[];
+    parameters: {
+        badges: BADGES[];
+    };
 };
 export default _default;
 export declare const Default: () => JSX.Element;

package/dist/src/navigation/LanguageNav.stories.js

@@ -1,9 +1,13 @@
 import React from "react";
+import { BADGES } from "../../.storybook/constants";
 import { LanguageNav } from "./LanguageNav";
 import { text, withKnobs } from "@storybook/addon-knobs";
 export default {
-    title: "Navigation/LanguageNav",
+    title: "Navigation/LanguageNav 🚩",
     decorators: [function (storyFn) { return React.createElement("div", { style: { padding: "1rem" } }, storyFn()); }, withKnobs],
+    parameters: {
+        badges: [BADGES.GEN2],
+    },
 };
 export var Default = function () { return (React.createElement(LanguageNav, { ariaLabel: text("ariaLabel", ""), languages: [
         {

package/dist/src/navigation/LanguageNav.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"LanguageNav.stories.js","sourceRoot":"","sources":["../../../src/navigation/LanguageNav.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAExD,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,EAAE,SAAS,CAAC;CAC9F,CAAA;AAED,MAAM,CAAC,IAAM,OAAO,GAAG,cAAM,OAAA,CAC3B,oBAAC,WAAW,IACV,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,EAChC,SAAS,EAAE;QACT;YACE,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,IAAI;YACZ,OAAO,EAAE,cAAO,CAAC;SAClB;QACD;YACE,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,KAAK;YACb,OAAO,EAAE,cAAO,CAAC;SAClB;KACF,GACD,CACH,EAhB4B,CAgB5B,CAAA"}
+{"version":3,"file":"LanguageNav.stories.js","sourceRoot":"","sources":["../../../src/navigation/LanguageNav.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAExD,eAAe;IACb,KAAK,EAAE,2BAA2B;IAClC,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,EAAE,SAAS,CAAC;IAC7F,UAAU,EAAE;QACV,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;KACtB;CACF,CAAA;AAED,MAAM,CAAC,IAAM,OAAO,GAAG,cAAM,OAAA,CAC3B,oBAAC,WAAW,IACV,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,EAChC,SAAS,EAAE;QACT;YACE,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,IAAI;YACZ,OAAO,EAAE,cAAO,CAAC;SAClB;QACD;YACE,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,KAAK;YACb,OAAO,EAAE,cAAO,CAAC;SAClB;KACF,GACD,CACH,EAhB4B,CAgB5B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "10.0.4",
+  "version": "10.0.6",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/ui-components",

package/src/navigation/FooterNav.scss

@@ -1,5 +1,8 @@
 .footer-sock {
-  @apply bg-gray-900;
+  --background-color: var(--bloom-color-gray-900);
+  --copyright-text-color: var(--bloom-color-gray-500);
+
+  background-color: var(--background-color);
   @apply py-8;
   @apply px-2;
 
@@ -29,9 +32,11 @@
   }
 
   .footer-copyright {
+    color: var(--copyright-text-color);
     width: auto;
     flex-shrink: 0;
     @screen lg {
+      @apply w-full;
       @apply text-left;
     }
   }

package/src/navigation/LanguageNav.scss

@@ -1,32 +1,43 @@
 .language-bar {
-  @apply bg-gray-800;
+  --inner-max-width: var(--bloom-width-5xl);
+  --inner-width: inherit;
+  --inner-desktop-padding: inherit;
+  --inner-mobile-padding: inherit;
+
+  background-color: var(--bloom-color-gray-800);
 }
 
 .language-bar__inner {
-  @apply max-w-5xl;
-  @apply flex;
-  @apply justify-end;
+  max-width: var(--inner-max-width);
+  width: var(--inner-width);
+  display: flex;
+  justify-content: end;
   margin: auto;
+  padding: var(--inner-mobile-padding);
+
+  @media (min-width: $screen-md) {
+    padding: 0 var(--bloom-s3);
+    padding: var(--inner-desktop-padding);
+  }
 }
 
 .language-nav__list {
-  @apply flex;
+  display: flex;
 }
 
 .language-nav__list-button {
-  @apply py-2;
-  @apply px-3;
-  @apply text-gray-500;
-  @apply font-semibold;
-  @apply cursor-pointer;
-  @apply bg-none;
+  padding: var(--bloom-s2) var(--bloom-s3);
+  color: var(--bloom-color-gray-500);
+  font-weight: 600;
+  cursor: pointer;
+  background-color: transparent;
 
   &:focus {
     outline: none;
-    box-shadow: 0 0 0 2px #fff, 0 0 3px 4px $tailwind-accent-cool;
+    box-shadow: 0 0 0 2px #fff, 0 0 3px 4px var(--bloom-color-accent-cool);
   }
 
   &.is-active {
-    @apply text-white;
+    color: var(--bloom-color-white);
   }
 }

package/src/navigation/LanguageNav.stories.tsx

@@ -1,11 +1,14 @@
 import React from "react"
-
+import { BADGES } from "../../.storybook/constants"
 import { LanguageNav } from "./LanguageNav"
 import { text, withKnobs } from "@storybook/addon-knobs"
 
 export default {
-  title: "Navigation/LanguageNav",
+  title: "Navigation/LanguageNav 🚩",
   decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>, withKnobs],
+  parameters: {
+    badges: [BADGES.GEN2],
+  },
 }
 
 export const Default = () => (