-
{props.title}
- {props.children}
-
- Logged in as: {profile?.handle || 'Not Logged In'}
+
+
+
+
+
+
{props.title}
+
+ {props.children}
+
+
+
)
diff --git a/src/lib/content-layout/sections/Sections.module.scss b/src/lib/content-layout/sections/Sections.module.scss
index b11e0da74..ad45ae9c7 100644
--- a/src/lib/content-layout/sections/Sections.module.scss
+++ b/src/lib/content-layout/sections/Sections.module.scss
@@ -1,7 +1,7 @@
@import '../../styles/';
.sections {
- height: $content-height;
+ @include content-height;
@include ltemd {
display: none;
diff --git a/src/lib/content-layout/sections/section-selector/Section-Selector.module.scss b/src/lib/content-layout/sections/section-selector/Section-Selector.module.scss
index 66f0f9c43..62e0df815 100644
--- a/src/lib/content-layout/sections/section-selector/Section-Selector.module.scss
+++ b/src/lib/content-layout/sections/section-selector/Section-Selector.module.scss
@@ -23,8 +23,7 @@ $svg-size: $pad-xxxxl;
}
svg {
- width: $svg-size;
- height: $svg-size;
+ @include icon-xxxxl;
fill: none;
path {
@@ -36,12 +35,12 @@ $svg-size: $pad-xxxxl;
.title {
text-align: center;
- /* TODO: replace below this w/a named design system font class */
- font-size: 11px;
- font-weight: 600;
- line-height: 14px;
- letter-spacing: 0px;
- text-transform: uppercase;
color: $black-60;
+ // extend ultra small and override it
+ @extend .ultra-small;
+ font-style: normal;
+ @include font-weight-semi-bold;
+ line-height: 14px;
+ text-transform: uppercase;
}
}
\ No newline at end of file
diff --git a/src/lib/form-elements/form-field/Form-Field.module.scss b/src/lib/form-elements/form-field/Form-Field.module.scss
new file mode 100644
index 000000000..2bae26f7e
--- /dev/null
+++ b/src/lib/form-elements/form-field/Form-Field.module.scss
@@ -0,0 +1,78 @@
+@import '../../styles';
+
+$form-pad-top: calc($pad-md - $border);
+$border-xs: 1px;
+
+.form-field-container {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ padding-bottom: $pad-md;
+
+ .form-field {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: $pad-sm $form-pad-top;
+ height: calc($pad-xxl * 2);
+ background: $tc-white;
+ border: $border-xs solid $black-40;
+ box-sizing: border-box;
+ border-radius: $pad-xs;
+
+ &:hover,
+ &.focus {
+ border-color: $turq-160;
+
+ &.form-field-error {
+ border-color: $red-100;
+ }
+ }
+
+ &.focus,
+ &.form-field-error {
+ border-width: $border;
+ padding: calc($pad-sm - $border-xs) calc($form-pad-top - $border-xs);
+ }
+
+ &.disabled {
+ background-color: $black-10;
+ background: $black-10;
+ border-color: $black-40;
+ }
+
+ &.form-field-error {
+ border-color: $red-100;
+
+ .label {
+ color: $red-100;
+ }
+ }
+
+ .label {
+ top: calc(50% - $form-pad-top/2);
+ color: $turq-160;
+ margin-bottom: $pad-xs;
+ // extend ultra-small and override some properties
+ @extend .ultra-small;
+ @include font-weight-medium;
+ line-height: calc($pad-md - $border);
+ }
+ }
+
+ .error {
+ display: flex;
+ align-items: center;
+ color: $red-100;
+ // extend body ultra small and override it
+ @extend .body-ultra-small;
+ line-height: 14px;
+
+ svg {
+ @include icon-md;
+ fill: $red-100;
+ margin-right: $pad-xs;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/lib/form-elements/form-field/Form-Field.test.tsx b/src/lib/form-elements/form-field/Form-Field.test.tsx
new file mode 100644
index 000000000..f241b6e3d
--- /dev/null
+++ b/src/lib/form-elements/form-field/Form-Field.test.tsx
@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('
', () => {
+
+ test('it should display the FormField', () => {})
+})
diff --git a/src/lib/form-elements/form-field/Form-Field.tsx b/src/lib/form-elements/form-field/Form-Field.tsx
new file mode 100644
index 000000000..47032e0aa
--- /dev/null
+++ b/src/lib/form-elements/form-field/Form-Field.tsx
@@ -0,0 +1,55 @@
+import classNames from 'classnames'
+import { Dispatch, FC, ReactNode, SetStateAction, useState } from 'react'
+
+import { IconSolid } from '../..'
+
+import styles from './Form-Field.module.scss'
+
+interface FormFieldProps {
+ children: ReactNode
+ className?: string
+ disabled?: boolean
+ label: string
+ props?: { [attr: string]: string }
+ tabIndex: number
+}
+
+const FormField: FC
= (props: FormFieldProps) => {
+
+ const [focusStyle, setFocusStyle]: [string | undefined, Dispatch>] = useState()
+ const formFieldClasses: string = classNames(
+ styles['form-field'],
+ props.disabled ? styles.disabled : undefined,
+ focusStyle,
+ props.props?.error ? styles['form-field-error'] : undefined
+ )
+
+ return (
+
+
+
setFocusStyle(undefined)}
+ onFocus={() => setFocusStyle(styles.focus)}
+ {...props}
+ >
+
+ {props.label}
+
+ {props.children}
+
+
+ {!!props.props?.error && (
+
+
+ {props.props.error}
+
+ )}
+
Basic Information
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Reset Password
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Profile
diff --git a/src/utils/utils.routes.ts b/src/utils/utils.routes.ts
index 09db9068d..bfba23748 100644
--- a/src/utils/utils.routes.ts
+++ b/src/utils/utils.routes.ts
@@ -1,9 +1,11 @@
import { PlatformRoute } from '../lib'
import { homeRoutes } from './home/home.routes'
+import { profileRoutes } from './profile/Profile.routes'
const utilsRoutes: Array = [
...homeRoutes,
+ ...profileRoutes,
]
export default utilsRoutes