561-refactor: Fsd widget required

dev-data/courseTitles.data.ts

@@ -1,4 +1,4 @@
-import { Course } from '@/widgets/required/required.types';
+import { Course } from '@/widgets/required/types';
 
 export const COURSE_TITLES = {
   JS_PRESCHOOL_RU: 'JS / Front-end Pre-school RU',

src/app/docs/components/search/search.module.scss

@@ -8,9 +8,9 @@
   width: 100%;
   height: 35px;
   padding: 5px 10px;
-
   border: 1px solid $color-gray-400;
   border-radius: 5px;
+
   outline-offset: -2px;
 
   &:focus {

src/core/base-layout/components/header/dropdown/dropdown-wrapper.module.scss

@@ -16,11 +16,11 @@
   max-width: calc(100vw - var(--page-padding));
   height: max-content;
   padding: 32px;
+  border-radius: 20px;
 
   visibility: hidden;
   opacity: 0;
   background-color: $color-white;
-  border-radius: 20px;
   box-shadow: 0 1px 8px 0 rgb(0 0 0 / 25%);
 
   &.open {

src/core/base-layout/components/header/nav-item/nav-item.module.scss

@@ -51,8 +51,8 @@
 
       margin-left: 10px;
       padding: 0;
-      background-color: transparent;
       border: none;
+      background-color: transparent;
 
       &:focus {
         outline-offset: 3px;

src/core/styles/_mixins.scss

@@ -54,11 +54,11 @@
 
   width: 256px;
   height: 248px;
+  border-radius: 100%;
 
   opacity: 0.5;
   background-color: $bg-color;
   filter: blur(32px);
-  border-radius: 100%;
 
   @if $isHovered {
     right: -130px;

src/core/styles/normalize.scss

@@ -74,9 +74,9 @@ a {
    */
 
 abbr[title] {
+  border-bottom: none; /* 1 */
   text-decoration: underline; /* 2 */
   text-decoration: underline dotted; /* 2 */
-  border-bottom: none; /* 1 */
 }
 
 /**

src/entities/course/ui/course-card/course-card.module.scss

@@ -9,7 +9,6 @@
   width: 380px;
   min-width: 100px;
   height: 100%;
-
   border-radius: 12px;
 
   .card-header {
@@ -23,12 +22,12 @@
     height: 100%;
     min-height: 112px;
     padding: 0 24px;
-
-    background-color: $color-purple-50;
     border: solid $color-gray-200;
     border-width: 1px 1px 0 1px;
     border-radius: 12px 12px 0 0;
 
+    background-color: $color-purple-50;
+
     &::after {
       @extend %transition-all;
 
@@ -49,11 +48,11 @@
     justify-content: space-between;
 
     padding: 24px;
-
-    background-color: hsla(from $color-gray-100 h s l/ $opacity-20);
     border: solid $color-gray-200;
     border-width: 0 1px 1px 1px;
     border-radius: 0 0 12px 12px;
+
+    background-color: hsla(from $color-gray-100 h s l/ $opacity-20);
   }
 
   @include media-hover {

src/entities/event/ui/event-card/event-card.module.scss

@@ -14,12 +14,12 @@
 
     height: 304px;
     padding: 32px 24px 24px 24px;
-
-    background-color: $color-purple-50;
     border: solid $color-gray-200;
     border-width: 1px 1px 0 1px;
     border-radius: 12px 12px 0 0;
 
+    background-color: $color-purple-50;
+
     &::after {
       @extend %transition-all;
 
@@ -35,13 +35,12 @@
       min-width: 124px;
       height: 36px;
       margin-top: 0;
+      border: 4px solid $color-purple-100;
+      border-radius: 36px;
 
       font-size: 16px;
       line-height: 1.2;
       color: $color-gray-600;
-
-      border: 4px solid $color-purple-100;
-      border-radius: 36px;
     }
 
     .about-organization {
@@ -100,12 +99,12 @@
 
     height: 192px;
     padding: 24px;
-
-    background-color: hsla(from $color-gray-100 h s l/ $opacity-20);
     border: solid $color-gray-200;
     border-width: 0 1px 1px 1px;
     border-radius: 0 0 12px 12px;
 
+    background-color: hsla(from $color-gray-100 h s l/ $opacity-20);
+
     .event-date {
       display: flex;
       flex-flow: row nowrap;

src/entities/trainer/ui/trainers-card/trainer-card.module.scss

@@ -6,8 +6,8 @@
 
   max-width: 700px;
   padding: 40px 32px 40px 32px;
-
   border-radius: 16px;
+
   box-shadow: 0 4px 16px 0 rgb(0 0 0 / 12%);
 
   .card-picture {

src/shared/types.ts

@@ -1,4 +1,4 @@
-import { LinkList } from '@/widgets/required/required.types';
+import { LinkList } from '@/widgets/required/types';
 
 export type ListData = (string | LinkList)[] | [];
 export type ListType = 'marked' | 'unmarked';

src/shared/ui/social-media-item/social-media-item.module.scss

@@ -19,8 +19,8 @@
 
   figure {
     display: flex;
-    background-color: $color-gray-200;
     border-radius: 50%;
+    background-color: $color-gray-200;
     transition: $transition-social;
 
     > img {

src/shared/ui/text-with-link/text-with-link.tsx

@@ -1,7 +1,7 @@
 import { Fragment } from 'react/jsx-runtime';
 
 import { LinkCustom } from '../link-custom';
-import { LinkList } from '@/widgets/required/required.types';
+import { LinkList } from '@/widgets/required/types';
 
 interface TextWithLinkProps {
   data: LinkList;
@@ -11,7 +11,11 @@ export const TextWithLink = ({ data }: TextWithLinkProps) => {
   return data.map(({ id, text, link, title }) => (
     <Fragment key={id}>
       {text && <span>{text}</span>}
-      {link && <LinkCustom href={link} external>{title}</LinkCustom>}
+      {link && (
+        <LinkCustom href={link} external>
+          {title}
+        </LinkCustom>
+      )}
     </Fragment>
   ));
 };

src/views/angular.tsx

@@ -28,7 +28,7 @@ export const Angular = async ({ courseName }: AngularProps) => {
       <Certification courseName={courseName} />
       <Communication courseName={courseName} />
       <MemberActivity path="angular" lang={await getCourseLanguage(courseName)} />
-      <Required courseName={courseName} marked1 />
+      <Required courseName={courseName} />
       <MentorsWantedCourse link={`/${ROUTES.MENTORSHIP}/${ROUTES.ANGULAR}`} />
       <Trainers trainers={angular} courseName={courseName} />
     </>

src/views/aws-developer.tsx

@@ -25,7 +25,7 @@ export const AwsDeveloper = async ({ courseName }: AwsDeveloperProps) => {
       <AboutCourse courseName={courseName} />
       <Certification courseName={courseName} />
       <Communication courseName={courseName} />
-      <Required courseName={courseName} marked1 />
+      <Required courseName={courseName} />
       <MemberActivity path="awsDev" lang={language} />
       <Trainers trainers={awsDev} courseName={courseName} />
     </>

src/views/aws-devops.tsx

@@ -21,7 +21,7 @@ export const AwsDevOps = ({ courseName }: AwsDevOpsProps) => {
       <AboutCourse courseName={courseName} />
       <Certification courseName={courseName} />
       <Communication courseName={courseName} />
-      <Required courseName={courseName} marked1 />
+      <Required courseName={courseName} />
       <Trainers trainers={awsDevops} courseName={courseName} />
     </>
   );

src/views/aws-fundamentals.tsx

@@ -20,7 +20,7 @@ export const AwsFundamentals = ({ courseName }: AwsFundamentalsProps) => {
       <AboutCourse courseName={courseName} />
       <Certification courseName={courseName} />
       <Communication courseName={courseName} />
-      <Required courseName={courseName} marked2 />
+      <Required courseName={courseName} />
       <TrainingProgram courseName={courseName} specify="badge" />
       <Trainers trainers={awsFundamentals} courseName={courseName} />
     </>

src/widgets/about-course/ui/about-course-grid/about-course-grid.module.scss

@@ -15,11 +15,11 @@
 
     width: 100%;
     padding: 24px;
-
-    background-color: $color-yellow-50;
     border: 1px solid hsla(from $color-yellow h s l/ $opacity-8);
     border-radius: 12px;
 
+    background-color: $color-yellow-50;
+
     .item-title {
       display: flex;
       gap: 16px;

src/widgets/benefits/ui/benefits/benefits.module.scss

@@ -10,14 +10,14 @@
 
   .grid-item {
     padding: 24px;
+    border: 1px solid $color-yellow-100;
+    border-radius: 12px;
 
     font-size: 18px;
     line-height: 28px;
     color: $color-gray-600;
 
     background-color: $color-yellow-50;
-    border: 1px solid $color-yellow-100;
-    border-radius: 12px;
 
     &:nth-child(1) {
       grid-area: top-left;
@@ -64,15 +64,15 @@
 
     width: 100%;
     padding: 24px;
+    border: 1px solid $color-yellow-100;
+    border-radius: 12px;
 
     font-size: 18px;
     line-height: 28px;
     color: $color-gray-600;
     letter-spacing: 0;
 
     background-color: $color-yellow-50;
-    border: 1px solid $color-yellow-100;
-    border-radius: 12px;
   }
 
   .item-short {

src/widgets/communication/ui/communication.module.scss

@@ -26,9 +26,9 @@
 
     width: 250px;
     padding: 30px;
+    border-radius: 30px;
 
     background-color: hsl(234.9deg 85.6% 64.7%);
-    border-radius: 30px;
 
     img {
       width: 100%;

src/widgets/member-activity/ui/stage-card/step/step.scss

@@ -14,13 +14,13 @@
 
     width: 80px;
     height: 80px;
+    border: 1px solid #fff2d9;
+    border-radius: 50%;
 
     font-size: 24px;
     line-height: 32px;
 
     background-color: #fffaf0;
-    border: 1px solid #fff2d9;
-    border-radius: 50%;
 
     @include media-tablet {
       width: 40px;

src/widgets/places/ui/places/places.module.scss

@@ -6,7 +6,6 @@
     display: flex;
 
     padding: 5px 20px;
-
     border-color: $color-gray-600;
     border-style: solid;
     border-width: 1px 0 1px 0;

src/widgets/principles/ui/principle-card/principle-card.module.scss

@@ -10,12 +10,12 @@
 
   width: 100%;
   padding: 24px;
+  border: 1px solid rgb(255 219 32 / 8%);
+  border-radius: 12px;
 
   color: $color-gray-600;
 
   background-color: $color-yellow-50;
-  border: 1px solid rgb(255 219 32 / 8%);
-  border-radius: 12px;
 
   &::after {
     content: '';
@@ -26,10 +26,10 @@
 
     width: 310px;
     height: 300px;
+    border-radius: 100%;
 
     background-color: rgb(255 219 32 / 20%);
     filter: blur(32px);
-    border-radius: 100%;
   }
 
   .card-header {
@@ -74,10 +74,10 @@
 
       width: 20px;
       height: 20px;
+      border-radius: 100%;
 
       background-color: rgba($color-yellow, $opacity-80);
       filter: blur(8px);
-      border-radius: 100%;
     }
   }
 

src/widgets/required/index.ts

@@ -1 +1 @@
-export { Required } from './ui/required';
+export { Required } from './ui/required/required';

src/widgets/required/required.types.ts → src/widgets/required/types.ts

@@ -7,7 +7,7 @@ type ItemWithLink = {
 
 export type LinkList = ItemWithLink[];
 
-export type Description = (string | LinkList)[];
+type Description = (string | LinkList)[];
 
 export type CourseModule = {
   title: string;

src/widgets/required/ui/course-module/course-module.module.scss

@@ -0,0 +1,11 @@
+.course-module-element {
+  margin-top: 20px;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  .course-module-title {
+    margin-bottom: 8px;
+  }
+}