@bloom-housing/ui-components 4.2.2-alpha.9 → 4.3.0

package/CHANGELOG.md

@@ -3,6 +3,212 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.2.3](https://github.com/seanmalbert/bloom/compare/@bloom-housing/ui-components@4.2.2...@bloom-housing/ui-components@4.2.3) (2022-04-28)
+## [4.2.2-alpha.29](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.28...@bloom-housing/ui-components@4.2.2-alpha.29) (2022-05-11)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+## [4.2.2](https://github.com/seanmalbert/bloom/compare/@bloom-housing/ui-components@4.2.1...@bloom-housing/ui-components@4.2.2) (2022-04-19)
+
+## [4.2.2-alpha.28](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.27...@bloom-housing/ui-components@4.2.2-alpha.28) (2022-05-11)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.27](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.26...@bloom-housing/ui-components@4.2.2-alpha.27) (2022-05-10)
+
+
+### Bug Fixes
+
+* site footer overflowing ([#2719](https://github.com/bloom-housing/bloom/issues/2719)) ([b36b9f3](https://github.com/bloom-housing/bloom/commit/b36b9f3b1acad7a3f030662ac396a2375f0b7db3))
+
+
+
+
+
+## [4.2.2-alpha.26](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.25...@bloom-housing/ui-components@4.2.2-alpha.26) (2022-05-05)
+
+
+### Bug Fixes
+
+* use appropriate copy for FCFS vs Lottery in Application Confirmation screen ([#2702](https://github.com/bloom-housing/bloom/issues/2702)) ([5289504](https://github.com/bloom-housing/bloom/commit/52895044cba64eeb7789c68f0a5eb957785055b5))
+
+
+
+
+
+## [4.2.2-alpha.25](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.24...@bloom-housing/ui-components@4.2.2-alpha.25) (2022-05-04)
+
+
+### Bug Fixes
+
+* footer alignment issue with overflowing links ([#2713](https://github.com/bloom-housing/bloom/issues/2713)) ([b87be1d](https://github.com/bloom-housing/bloom/commit/b87be1da10d59df2616f5df51629a8201baa6f86))
+
+
+
+
+
+## [4.2.2-alpha.24](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.23...@bloom-housing/ui-components@4.2.2-alpha.24) (2022-05-04)
+
+
+### Code Refactoring
+
+* remove backend dependencies from sidebar application components ([#2675](https://github.com/bloom-housing/bloom/issues/2675)) ([d2ebf87](https://github.com/bloom-housing/bloom/commit/d2ebf87c34af3f5b6168fa4e08663fea0a4a872c))
+
+
+### BREAKING CHANGES
+
+* the LeasingAgent component has been renamed to Contact with a new generalized prop set, the SidebarAddress component has been renamed to ContactAddress with a new generalized prop set
+
+
+
+
+
+## [4.2.2-alpha.23](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.22...@bloom-housing/ui-components@4.2.2-alpha.23) (2022-05-04)
+
+
+### Code Refactoring
+
+* remove business logic, strings from waitlist component ([#2689](https://github.com/bloom-housing/bloom/issues/2689)) ([a5721db](https://github.com/bloom-housing/bloom/commit/a5721db518453ddbd777e50ca92fdeac19997aa9))
+
+
+### BREAKING CHANGES
+
+* the Waitlist component was renamed to QuantityRowSection which also has a new prop set to account for a flexible number of rows and strings
+
+
+
+
+
+## [4.2.2-alpha.22](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.21...@bloom-housing/ui-components@4.2.2-alpha.22) (2022-05-03)
+
+
+### Features
+
+* **backend:** improve ami chart dto definitions ([#2677](https://github.com/bloom-housing/bloom/issues/2677)) ([ca3890e](https://github.com/bloom-housing/bloom/commit/ca3890e2759f230824e31e6bd985300f40b0a0ed))
+
+
+
+
+
+## [4.2.2-alpha.21](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.20...@bloom-housing/ui-components@4.2.2-alpha.21) (2022-04-29)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.20](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.19...@bloom-housing/ui-components@4.2.2-alpha.20) (2022-04-29)
+
+
+### Bug Fixes
+
+* ux updates for new listing card design ([#2687](https://github.com/bloom-housing/bloom/issues/2687)) ([c8814ae](https://github.com/bloom-housing/bloom/commit/c8814ae57b62fa6f932017bb70d47663b09fca1a))
+
+
+
+
+
+## [4.2.2-alpha.19](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.18...@bloom-housing/ui-components@4.2.2-alpha.19) (2022-04-28)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.18](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.17...@bloom-housing/ui-components@4.2.2-alpha.18) (2022-04-28)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.17](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.16...@bloom-housing/ui-components@4.2.2-alpha.17) (2022-04-28)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.16](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.15...@bloom-housing/ui-components@4.2.2-alpha.16) (2022-04-27)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.15](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.14...@bloom-housing/ui-components@4.2.2-alpha.15) (2022-04-26)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.14](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.13...@bloom-housing/ui-components@4.2.2-alpha.14) (2022-04-22)
+
+
+### Features
+
+* swap anchor tags with LinkComponent for language routes ([#2686](https://github.com/bloom-housing/bloom/issues/2686)) ([a397930](https://github.com/bloom-housing/bloom/commit/a3979306fe39acd7b424a9e7364d791ad77fa2d0))
+
+
+
+
+
+## [4.2.2-alpha.13](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.12...@bloom-housing/ui-components@4.2.2-alpha.13) (2022-04-22)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.12](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.11...@bloom-housing/ui-components@4.2.2-alpha.12) (2022-04-22)
+
+
+### Bug Fixes
+
+* forgot password empty warning and two minor style changes ([#2680](https://github.com/bloom-housing/bloom/issues/2680)) ([01f1519](https://github.com/bloom-housing/bloom/commit/01f15194e2de8595a772c8c87f455d882e47f164))
+
+
+
+
+
+## [4.2.2-alpha.11](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.10...@bloom-housing/ui-components@4.2.2-alpha.11) (2022-04-21)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.10](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.9...@bloom-housing/ui-components@4.2.2-alpha.10) (2022-04-21)
+
+
+### Features
+
+* new category table component ([#2648](https://github.com/bloom-housing/bloom/issues/2648)) ([3b3fe46](https://github.com/bloom-housing/bloom/commit/3b3fe46dda3d0e553664c10cea46849551ce064c))
+
+
+### BREAKING CHANGES
+
+* There is a new prop interface for the StandardTable component and all components that use it, which includes passing cell content within a new object, allowing us to support new cell options - all tables will need to pass data with the new format.
+
+
+
+
+
 ## [4.2.2-alpha.9](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.8...@bloom-housing/ui-components@4.2.2-alpha.9) (2022-04-20)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/README.md

@@ -46,16 +46,22 @@ yarn test:a11y
 
 ## Tailwind
 
-- We are using the [Tailwind](https://v1.tailwindcss.com) framework to make use of their low-level utility library that styles components based on custom settings. We configure the settings in `tailwind.config`. Some styles live in a global folder, but for the most part our components are styled with isolated SCSS files.
+- We are using the [Tailwind](https://v2.tailwindcss.com) framework to make use of their low-level utility classes in page-level markup and sometimes in components. We configure the settings in `tailwind.config.js`.
 
-- Use Tailwind where possible before creating custom style sheets or custom classes for consistency.
-
-Vendor Plugins
+## Vendor Plugins
 
 - [AG Grid](https://www.ag-grid.com)
 
 ## Style Conventions
 
+- Some styles live in a global folder, but for the most part our components are styled with isolated SCSS files located alongside React component TS files.
+
+- We are currently in the process of migrating components to a second-generation styling convention which relies on CSS variables for design tokens and generally removes `@apply` Tailwind statements.
+
+- Bloom design tokens include colors, typography settings, sizes, borders, and so forth. They're located in the `src/global/tokens` folder.
+
+- More information on this process can be found in [Styling2ndGen.md](https://github.com/bloom-housing/bloom/blob/dev/docs/Styling2ndGen.md).
+
 ### Naming Conventions
 
 - Our recommendation for class naming methodology is a modified version of BEM. It still uses blocks, sections within blocks and modifiers, but with a subclass syntax for modifiers.

package/index.ts

@@ -52,23 +52,24 @@ export * from "./src/headers/SiteHeader"
 export * from "./src/headers/Heading"
 
 /* Helpers */
-export * from "./src/helpers/address"
 export * from "./src/helpers/capitalize"
 export * from "./src/helpers/dateToString"
+export * from "./src/helpers/debounce"
 export * from "./src/helpers/formOptions"
+export * from "./src/helpers/formatYesNoLabel"
+export * from "./src/helpers/getTranslationWithArguments"
 export * from "./src/helpers/links"
 export * from "./src/helpers/mergeDeep"
+export * from "./src/helpers/MultiLineAddress"
 export * from "./src/helpers/numberOrdinal"
-export * from "./src/helpers/translator"
-export * from "./src/helpers/debounce"
-export * from "./src/helpers/validators"
-export * from "./src/helpers/formatYesNoLabel"
-export * from "./src/helpers/getTranslationWithArguments"
+export * from "./src/helpers/OneLineAddress"
 export * from "./src/helpers/preferences"
 export * from "./src/helpers/resolveObject"
+export * from "./src/helpers/tableSummaries"
+export * from "./src/helpers/translator"
 export * from "./src/helpers/useIntersect"
 export * from "./src/helpers/useMutate"
-export * from "./src/helpers/tableSummaries"
+export * from "./src/helpers/validators"
 
 /* Icons */
 export * from "./src/icons/HeaderBadge"
@@ -108,14 +109,14 @@ export * from "./src/page_components/listing/ListingMap"
 export * from "./src/page_components/listing/ListingsGroup"
 export * from "./src/page_components/listing/UnitTables"
 export * from "./src/page_components/listing/listing_sidebar/GetApplication"
-export * from "./src/page_components/listing/listing_sidebar/LeasingAgent"
+export * from "./src/page_components/listing/listing_sidebar/Contact"
 export * from "./src/page_components/listing/listing_sidebar/ListingUpdated"
 export * from "./src/page_components/listing/listing_sidebar/NumberedHeader"
 export * from "./src/page_components/listing/listing_sidebar/OrDivider"
 export * from "./src/page_components/listing/listing_sidebar/ReferralApplication"
-export * from "./src/page_components/listing/listing_sidebar/SidebarAddress"
+export * from "./src/page_components/listing/listing_sidebar/ContactAddress"
 export * from "./src/page_components/listing/listing_sidebar/SubmitApplication"
-export * from "./src/page_components/listing/listing_sidebar/Waitlist"
+export * from "./src/page_components/listing/listing_sidebar/QuantityRowSection"
 export * from "./src/page_components/listing/listing_sidebar/WhatToExpect"
 export * from "./src/page_components/listing/listing_sidebar/events/DownloadLotteryResults"
 export * from "./src/page_components/listing/listing_sidebar/events/EventSection"
@@ -145,6 +146,7 @@ export * from "./src/tables/StandardTable"
 export * from "./src/tables/GroupedTable"
 export * from "./src/tables/MinimalTable"
 export * from "./src/tables/StackedTable"
+export * from "./src/tables/CategoryTable"
 
 /* Text */
 export * from "./src/text/Description"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.2.2-alpha.9",
+  "version": "4.3.0",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -24,6 +24,7 @@
     "@babel/preset-env": "^7.15.4",
     "@emotion/core": "^10.0.35",
     "@emotion/styled": "^10.0.27",
+    "@geometricpanda/storybook-addon-badges": "^0.2.1",
     "@storybook/addon-a11y": "^6.3.8",
     "@storybook/addon-actions": "^6.3.8",
     "@storybook/addon-docs": "^6.3.8",
@@ -65,15 +66,16 @@
     "style-loader": "^1.1.3",
     "ts-jest": "^26.4.1",
     "ts-loader": "^8.0.4",
-    "typescript": "^3.9.7",
+    "typescript": "^4.5.5",
     "webpack": "^4.44.2"
   },
   "dependencies": {
-    "@bloom-housing/backend-core": "^4.2.2-alpha.2",
+    "@bloom-housing/backend-core": "^4.3.0",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/jwt-decode": "^2.2.1",
     "@types/markdown-to-jsx": "^6.11.2",
+    "@types/mdx": "^2.0.1",
     "@types/node": "^12.12.67",
     "@types/node-polyglot": "^2.4.1",
     "@types/react-beautiful-dnd": "^13.1.1",
@@ -100,5 +102,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "587e34d8810b8271e88bb855e694a443c13d9092"
+  "gitHead": "1a7e221449e2af62cfa67b594779bcf7b900b5fc"
 }

package/src/actions/Button.docs.mdx

@@ -0,0 +1,76 @@
+import { Canvas, Story, Source, ArgsTable } from "@storybook/addon-docs"
+import { Swatch } from "../prototypes/Swatch"
+import { Button } from "./Button"
+
+# Button
+
+The button component offers flexible usage with a variety of different appearance options. Size, color, and shape can be controlled via standardized props.
+
+<Canvas>
+  <Button>This is a Button</Button>
+</Canvas>
+
+## Variants
+
+There are several props which accept enums to adjust style type, border, and size. For example, to choose the "primary" style and a "small" size, you would pass the `AppearanceStyleType.primary` enum to `styleType` prop and `AppearanceSizeType.small` enum to `size` prop.
+
+<Canvas>
+  <Story id="actions-button--small-and-primary" />
+</Canvas>
+
+Other variants include appearances which aren't button-like such as `unstyled` and `inline`.
+
+## Component Properties
+
+<ArgsTable of={Button} />
+
+## Theming Variables
+
+You can apply CSS variables to the `.button` selector to customize the appearance of the component.
+
+### Color Variables
+
+| Name                                          | Color                                            | Description                          |
+| --------------------------------------------- | ------------------------------------------------ | ------------------------------------ |
+| `--primary-appearance-background-color`       | <Swatch colorVar="--bloom-color-primary" />      | Primary background color             |
+| `--primary-appearance-border-color`           | <Swatch colorVar="--bloom-color-primary" />      | Primary border color                 |
+| `--primary-appearance-label-color`            | <Swatch colorVar="--bloom-color-white" />        | Primary label color                  |
+| `--primary-appearance-hover-background-color` | <Swatch colorVar="--bloom-color-primary-dark" /> | Hover state primary background color |
+| `--primary-appearance-hover-border-color`     | <Swatch colorVar="--bloom-color-primary-dark" /> | Hover state primary border color     |
+| `--primary-appearance-hover-label-color`      | <Swatch colorVar="--bloom-color-white" />        | Hover state primary label color      |
+| `--success-appearance-background-color`       | <Swatch colorVar="--bloom-color-success" />      | Success background color             |
+| `--success-appearance-border-color`           | <Swatch colorVar="--bloom-color-success" />      | Success border color                 |
+| `--success-appearance-label-color`            | <Swatch colorVar="--bloom-color-white" />        | Success label color                  |
+| `--success-appearance-hover-background-color` | <Swatch colorVar="--bloom-color-success-dark" /> | Hover state success background color |
+| `--success-appearance-hover-border-color`     | <Swatch colorVar="--bloom-color-success" />      | Hover state success border color     |
+| `--success-appearance-hover-label-color`      | <Swatch colorVar="--bloom-color-white" />        | Hover state success label color      |
+| `--alert-appearance-background-color`         | <Swatch colorVar="--bloom-color-alert" />        | Alert background color               |
+| `--alert-appearance-border-color`             | <Swatch colorVar="--bloom-color-alert" />        | Alert border color                   |
+| `--alert-appearance-label-color`              | <Swatch colorVar="--bloom-color-white" />        | Alert label color                    |
+| `--alert-appearance-hover-background-color`   | <Swatch colorVar="--bloom-color-alert-dark" />   | Hover state alert background color   |
+| `--alert-appearance-hover-border-color`       | <Swatch colorVar="--bloom-color-alert" />        | Hover state alert border color       |
+| `--alert-appearance-hover-label-color`        | <Swatch colorVar="--bloom-color-white" />        | Hover state alert label color        |
+| `--warn-appearance-background-color`          | <Swatch colorVar="--bloom-color-warn" />         | Warning background color             |
+| `--warn-appearance-border-color`              | <Swatch colorVar="--bloom-color-warn" />         | Warning border color                 |
+| `--warn-appearance-label-color`               | <Swatch colorVar="--bloom-color-white" />        | Warning label color                  |
+| `--warn-appearance-hover-background-color`    | <Swatch colorVar="--bloom-color-warn-dark" />    | Hover state warning background color |
+| `--warn-appearance-hover-border-color`        | <Swatch colorVar="--bloom-color-warn" />         | Hover state warning border color     |
+| `--warn-appearance-hover-label-color`         | <Swatch colorVar="--bloom-color-white" />        | Hover state warning label color      |
+
+### Typographic & Spacing Variables
+
+| Name                     | Type        | Description                                         | Default                                             |
+| ------------------------ | ----------- | --------------------------------------------------- | --------------------------------------------------- |
+| `--label-font`           | Font        | Font family of the button label                     | `--bloom-font-alt-sans`                             |
+| `--label-transform`      | Case        | Text case of the button label                       | `uppercase`                                         |
+| `--label-letter-spacing` | Size        | The average gap between letters of the button label | `--bloom-letter-spacing-widest`                     |
+| `--label-weight`         | Font Weight | Typographic weight of the button label              | `bold`                                              |
+| `--normal-rounded`       | Size        | Border radius of a normal-size button               | `--bloom-rounded`                                   |
+| `--normal-padding`       | Size        | Padding of the normal-size button interior          | `--bloom-s4` (top/bottom) `--bloom-s6` (left/right) |
+| `--normal-font-size`     | Size        | Font size of the normal-size button                 | `--bloom-font-size-sm`                              |
+| `--small-rounded`        | Size        | Border radius of a small-size button                | `--bloom-rounded`                                   |
+| `--small-padding`        | Size        | Padding of the small-size button interior           | `--bloom-s3` (top/bottom) `--bloom-s6` (left/right) |
+| `--small-font-size`      | Size        | Font size of the small-size button                  | `--bloom-font-size-xs`                              |
+| `--big-rounded`          | Size        | Border radius of a large-size button                | `--bloom-rounded`                                   |
+| `--big-padding`          | Size        | Padding of the large-size button interior           | `--bloom-s6`                                        |
+| `--big-font-size`        | Size        | Font size of the large-size button                  | `--bloom-font-size-sm`                              |

package/src/actions/Button.scss

@@ -1,59 +1,58 @@
 @import "../global/mixins.scss";
 
 .button {
-  @apply relative;
-  @apply rounded;
-  @apply px-6;
-  @apply py-4;
-  @apply text-lg;
-  @apply text-center;
-  @apply uppercase;
-  @apply font-alt-sans;
-  @apply inline-block;
-  @apply tracking-widest;
-  @apply text-sm;
-  @apply font-bold;
-  @apply leading-snug;
+  position: relative;
+  border-radius: var(--normal-rounded, var(--bloom-rounded));
+  padding: var(--normal-padding, var(--bloom-s4) var(--bloom-s6));
+  text-align: center;
+  text-transform: var(--label-transform, uppercase);
+  font-family: var(--label-font, var(--bloom-font-alt-sans));
+  display: inline-block;
+  letter-spacing: var(--label-letter-spacing, var(--bloom-letter-spacing-widest));
+  font-size: var(--normal-font-size, var(--bloom-font-size-sm));
+  font-weight: var(--label-weight, bold);
+  line-height: var(--bloom-line-height-snug);
 
   &: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);
   }
 
   &:hover {
-    @apply border-primary-dark;
+    border-color: var(--bloom-color-primary-dark);
   }
 
   &:disabled {
     pointer-events: none;
-    @apply bg-white;
-    @apply border-gray-450;
-    @apply text-gray-450;
+    background-color: var(--bloom-color-white);
+    border-color: var(--bloom-color-gray-450);
+    color: var(--bloom-color-gray-450);
   }
 
   &.is-secondary {
-    @apply border-gray-700;
-    @apply text-gray-700;
+    border-color: var(--bloom-color-gray-700);
+    color: var(--bloom-color-gray-700);
 
     &:hover {
-      @apply bg-gray-700;
-      @apply text-white;
+      background-color: var(--bloom-color-gray-700);
+      color: var(--bloom-color-white);
     }
   }
 
   &.is-small {
-    @apply text-xs;
-    @apply px-6;
-    @apply py-3;
+    border-radius: var(--small-rounded, var(--bloom-rounded));
+    padding: var(--small-padding, var(--bloom-s3) var(--bloom-s6));
+    font-size: var(--small-font-size, var(--bloom-font-size-xs));
   }
 
   &.is-big {
-    @apply px-6;
-    @apply py-6;
+    border-radius: var(--big-rounded, var(--bloom-rounded));
+    padding: var(--big-padding, var(--bloom-s6));
+    font-size: var(--big-font-size, var(--bloom-font-size-sm));
   }
 
   &.is-normal-case {
-    @apply normal-case;
+    text-transform: none;
   }
 
   &.is-unstyled {
@@ -62,74 +61,72 @@
 
   &.is-unstyled,
   &.is-inline {
-    @apply normal-case;
-    @apply border-0;
-    @apply p-0;
-    @apply font-sans;
-    @apply tracking-normal;
-    @apply font-normal;
-    @apply underline;
-    @apply m-4;
-    @apply text-tiny;
+    text-transform: none;
+    border: none;
+    padding: 0;
+    font-family: var(--bloom-font-sans);
+    letter-spacing: normal;
+    font-weight: 400;
+    text-decoration: underline;
+    margin: var(--bloom-s4);
+    font-size: var(--bloom-font-size-tiny);
 
     &:hover {
-      @apply text-primary;
+      color: var(--bloom-color-primary);
       background: transparent;
     }
   }
 
   &.is-inline {
-    @apply text-primary;
-    @apply font-semibold;
-    @apply text-tiny;
-    @apply m-0;
-    @apply no-underline;
+    color: var(--bloom-color-primary);
+    font-weight: 600;
+    font-size: var(--bloom-font-size-tiny);
+    margin: 0;
+    text-decoration: none;
 
     &.has-icon-left {
       .button__icon {
-        @apply mr-1;
+        margin-right: var(--bloom-s1);
       }
     }
     &.has-icon-right {
       .button__icon {
-        @apply ml-1;
+        margin-left: var(--bloom-s1);
       }
     }
   }
 
   &.has-icon-left {
     .button__icon {
-      @apply mr-3;
+      margin-right: var(--bloom-s3);
     }
   }
   &.has-icon-right {
     .button__icon {
-      @apply ml-3;
+      margin-left: var(--bloom-s3);
     }
   }
 
   &.is-text-caps {
-    @apply text-primary-dark;
-    @apply normal-case;
-    @apply border-0;
-    @apply p-0;
-    @apply font-sans;
-    @apply tracking-normal;
-    @apply font-normal;
-    @apply underline;
-    @apply m-4;
-    @apply uppercase;
-    @apply text-tiny;
-    @apply block;
+    color: var(--bloom-color-primary-dark);
+    border: none;
+    padding: 0;
+    font-family: var(--bloom-font-sans);
+    letter-spacing: normal;
+    text-decoration: underline;
+    margin: var(--bloom-s4);
+    text-transform: uppercase;
+    font-size: var(--bloom-font-size-tiny);
+    display: block;
 
     &:hover {
-      @apply text-primary-dark;
+      color: var(--bloom-color-primary-dark);
       background: transparent;
     }
   }
 
   &.is-fullwidth {
-    @apply w-full;
+    width: 100%;
   }
 
   &.is-loading {

package/src/blocks/DashBlock.tsx

@@ -1,5 +1,6 @@
-import React from "react"
+import React, { useContext } from "react"
 import "./DashBlocks.scss"
+import { NavigationContext } from "../config/NavigationContext"
 
 interface DashBlockProps {
   href?: string
@@ -10,6 +11,7 @@ interface DashBlockProps {
   dataTestId?: string
 }
 const DashBlock = (props: DashBlockProps) => {
+  const { LinkComponent } = useContext(NavigationContext)
   const { href, title, subtitle, icon, children } = props
   let content, wrapper
   if (children) {
@@ -24,9 +26,9 @@ const DashBlock = (props: DashBlockProps) => {
   )
   if (href) {
     wrapper = (
-      <a href={href} className="dash-item">
+      <LinkComponent href={href} className="dash-item">
         {header}
-      </a>
+      </LinkComponent>
     )
   } else {
     wrapper = (