feat: storybook preview scss (#749)

Signed-off-by: hxtree <[email protected]>
hxtree · Dec 12, 2023 · c408cf4 · c408cf4
1 parent 9cc6a04
commit c408cf4
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 13 deletions.
diff --git a/services/design-system/.storybook/preview.ts b/services/design-system/.storybook/preview.ts
@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/react';
+import '../src/styles/index.scss';
 
 const preview: Preview = {
   parameters: {

diff --git a/services/design-system/README.md b/services/design-system/README.md
@@ -13,9 +13,11 @@ publishes a package of those designs for use in other applications.
 
 **Features**:
 
-- Aids in local development of UI components.
-- Deploys a static design system website.
-- Front-end library containing UI components.
+- **UI Component Development**: Allows for the local development of UI
+  components in isolation.
+- **UI Component Library**: This is library containing UI components that
+  front-ends can use to ensure consistently in design.
+- **UI Design System**: Deploys a static design system website.
 
 ## Components
 

diff --git a/services/design-system/src/components/Button/Button.tsx b/services/design-system/src/components/Button/Button.tsx
@@ -1,4 +1,5 @@
 import MUIButton, { ButtonProps as MUIButtonProps } from '@mui/material/Button';
+import './style.module.scss';
 
 export type ButtonProps = {
   selected?: boolean;
@@ -13,13 +14,7 @@ export const Button = (props: ButtonProps) => {
   return (
     <MUIButton
       {...muiProps}
-      style={{
-        ...(props.selected && { backgroundColor: '#616366', color: '#FFF' }),
-        fontFamily: 'Helvetica, arial, sans-serif',
-        fontWeight: 'bold',
-        borderRadius: '36px',
-        padding: '15px 30px 10px 30px',
-      }}
+      className='button'
     >
       {children}
     </MUIButton>

diff --git a/services/design-system/src/components/Button/style.module.scss b/services/design-system/src/components/Button/style.module.scss
@@ -0,0 +1,17 @@
+.button {
+  &.select {
+    background-color: #616366 !important;
+    color: #FFF !important;
+  };
+  font-family: Helvetica, arial, sans-serif !important;
+  font-weight: bold !important;
+  border-radius: 36px !important;
+  padding: 15px 30px 10px 30px !important;
+  &:focus {
+    outline-style: solid !important;
+    outline: #F00;
+    outline-color: #FFF !important;
+    outline-offset: -10px !important;
+    outline-width: 4px !important;
+  }
+}
diff --git a/services/design-system/src/components/PageFooter/PageFooter.tsx b/services/design-system/src/components/PageFooter/PageFooter.tsx
@@ -1,4 +1,4 @@
-// import './page-footer.scss';
+import './style.module.scss';
 
 export type PageFooterLink = {
   label: string;

diff --git a/...rc/components/PageFooter/page-footer.scss → ...c/components/PageFooter/style.module.scss b/...rc/components/PageFooter/page-footer.scss → ...c/components/PageFooter/style.module.scss
diff --git a/services/design-system/src/components/Typography/style.module.scss b/services/design-system/src/components/Typography/style.module.scss
@@ -6,12 +6,12 @@
   font-family: "Eczar", serif;
   font-weight: 800;
   font-size: 2rem;
-  color: var(--primary);
+  // color: var(--primary);
   padding: 12px 0;
   &.fill {
     border-radius: 5px;
     padding: 13px;
-    color: var(--primary);
+    // color: var(--primary);
   };
   &.border {
     font-size: 4rem;

diff --git a/services/design-system/src/styles/index.scss b/services/design-system/src/styles/index.scss
@@ -0,0 +1,3 @@
+@forward '../components/Typography/style.module.scss';
+@forward '../components/PageFooter/style.module.scss';
+@forward '../components/Button/style.module.scss';