⚡ adding auto-pr github action

🪄 refactoring radiogroup, radio, rate, read-more and reveal

.github/workflows/auto-pr.yml

@@ -1,21 +1,32 @@
 name: Create Pull Request
+
 on:
   push:
-    branches:
-      # Create pull requests only for non-master branches
-      - "!master"
+    # Sequence of patterns matched against refs/heads
+    branches-ignore:
+      # Ignore main branch
+      - 'master'
+
 jobs:
-  build:
+  createPullRequest:
     runs-on: ubuntu-latest
+
     steps:
-      - name: Checkout
-        uses: actions/[email protected]
-        with:
-          ref: ${{ github.ref }}
-      - name: Create Pull Request
+      # Checks out your repository under $GITHUB_WORKSPACE
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      # Create Pull Request
+      - name: Create PR
         uses: peter-evans/create-pull-request@v3
         with:
-          commit-message: "Automated Pull Request"
-          title: "Automated Pull Request"
-          branch: ${{ github.ref }}
-          token: ${{ secrets.GIT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          title: 'New changes from ${GITHUB_REF##*/}'
+          base: 'master'
+          # Change 'master' to your primary branch if necessary
+          branch: 'automated-pr/${{ github.head_ref }}'
+          delete-branch: true
+          # Adding some default labels
+          labels: 'auto-pr'
+          # Draft pull requests are not considered to be ready for review
+          draft: true

packages/lib/components/radio-group/radio-group.module.scss

@@ -25,7 +25,7 @@
   @extend %list-item-left;
   margin: 0.5rem;
 
-  &.radio_grp_item_disabled {
+  &.disabled {
     @extend %disabled;
   }
 }

packages/lib/components/radio/radio.module.scss

@@ -11,27 +11,29 @@ $sizes: (
   md: 24px,
   lg: 28px,
 );
-
 $heights: (
   sm: 32px,
   md: 48px,
   lg: 56px,
 );
 
-.wrapper {
-  @extend %left;
+%common-properties {
   cursor: pointer;
+  @extend %left;
+}
+
+.wrapper {
+  @extend %common-properties;
   display: grid;
   justify-items: center;
   padding: 0.25rem 0;
-
-  &:not(.rtl) {
-    padding-left: 0.5rem;
-  }
+  padding-left: 0.5rem;
+  direction: ltr;
 
   &.rtl {
     direction: rtl;
     padding-right: 0.5rem;
+    padding-left: 0;
   }
 
   &.full_width {
@@ -65,8 +67,7 @@ $heights: (
 }
 
 .radio {
-  @extend %left;
-  cursor: pointer;
+  @extend %common-properties;
   height: 100%;
   position: relative;
   user-select: none;
@@ -84,32 +85,25 @@ $heights: (
 
         &::after {
           @include position.position-abs('center center');
-          background: theme.$primary;
           @include effects.include-transition-multiple(height width);
           border-radius: 100%;
           content: '';
           display: block;
           height: 65%;
           width: 65%;
+          background: transparent;
         }
 
-        &:not(.ico_checked)::after {
-          background: transparent;
+        &.ico_checked::after {
+          background: theme.$primary;
         }
       }
     }
   }
 }
 
-%pseudo-common {
-  background-color: theme.$primary;
-  border-radius: 50%;
-  content: '';
-  display: block;
-}
-
 .icon {
-  border: 1px solid theme.$primary;
+  border: 1px solid rgba(theme.$primary-rgb, 0.25);
   border-radius: 50%;
   display: block;
   position: relative;
@@ -119,42 +113,31 @@ $heights: (
   }
 
   &.ico_checked {
-    // background-color: theme.$primary;
-    // border: 1px solid theme.$primary;
+    border: 1px solid theme.$primary;
   }
-}
 
-.icon:not(.ico_checked) {
-  &.dark {
-    // background-color: theme.$dark-control-bg;
-    // border: 1px solid theme.$dark-control-bg;
-  }
-
-  &:not(.dark) {
-    @extend %shadow-inset;
-    border: 1px solid rgba(theme.$primary-rgb, 0.25);
+  &.dark:not(.ico_checked) {
+    // assuming that the values for these are defined in the theme or another imported file
+    border: 1px solid theme.$dark-control-bg;
   }
 }
 
 .label {
-  @extend %left;
-  cursor: pointer;
+  @extend %common-properties;
+  color: theme.$black;
   padding-left: 0.5rem;
 
   &.dark {
     color: theme.$white;
   }
 
-  &:not(.dark) {
-    color: theme.$black;
-  }
-
   &.disabled {
     @extend %disabled;
   }
 
   &.rtl {
     padding-right: 0.5rem;
+    padding-left: 0;
   }
 
   @each $key, $val in $sizes {

packages/lib/components/rate/rate.module.scss

@@ -44,38 +44,22 @@ $sizes: (
     }
   }
 
-  &.dark svg {
-    fill: theme.$dark-control-bg;
-  }
-
-  &:not(.dark) svg {
-    fill: theme.$alto;
-  }
-}
-
-.item.active {
-  color: theme.$primary;
-
   svg {
-    fill: theme.$primary;
-  }
-}
+    fill: theme.$alto;
+    height: 100%;
+    stroke-width: 0;
+    transition: fill 0.1s ease-in;
+    width: 100%;
 
-.item.hovered {
-  svg {
-    fill: theme.$primary;
+    // Assuming that .dark is applied to the .item and not to the svg
+    .dark & {
+      fill: theme.$dark-control-bg;
+    }
   }
-}
 
-.item:hover {
-  svg {
+  &.active svg,
+  &.hovered svg,
+  &:hover svg {
     fill: theme.$primary;
   }
 }
-
-.item svg {
-  height: 100%;
-  stroke-width: 0;
-  transition: fill 0.1s ease-in;
-  width: 100%;
-}

packages/lib/components/read-more/read-more.module.scss

@@ -5,27 +5,23 @@
 $sizes: (sm, md, lg);
 
 .container {
+  @extend %col-left;
+
   &.rtl {
     @extend %col-right;
   }
-
-  &:not(.rtl) {
-    @extend %col-left;
-  }
 }
 
 .wrapper {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
   margin: 0;
   overflow: hidden;
   padding: 0;
   position: relative;
-
-  &:not(.rtl) {
-    align-items: flex-start;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-  }
+  color: theme.$black;
 
   &.rtl {
     text-align: right;
@@ -35,10 +31,6 @@ $sizes: (sm, md, lg);
     color: theme.$white;
   }
 
-  &:not(.dark) {
-    color: theme.$black;
-  }
-
   @each $size in $sizes {
     &.#{$size} {
       @extend %text-#{$size};

packages/lib/components/reveal/reveal.module.scss

@@ -6,15 +6,14 @@
 }
 
 .reveal {
-  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
+  opacity: 0;
+  transform: scale(0.98);
+  transition:
+    opacity 0.5s ease-in-out,
+    transform 0.5s ease-in-out;
 
   &.show {
     opacity: 1;
     transform: scale(1);
   }
-
-  &.hide {
-    opacity: 0;
-    transform: scale(0.98);
-  }
 }

packages/lib/components/scroll-spy/scroll-spy.module.scss

@@ -22,20 +22,19 @@
   .aside {
     order: 2;
   }
-
   .content {
     order: 1;
   }
 }
 
-.aside {
+.aside,
+.list {
   @extend %center;
   width: 100%;
 }
 
 .list {
-  @extend %list-left;
-  width: 100%;
+  flex-direction: column;
 }
 
 .list_item {
@@ -51,12 +50,13 @@
     color: theme.$white;
   }
 
-  &:not(.dark).active {
-    color: theme.$white;
-  }
-
-  &:not(.dark):not(.active) {
-    color: theme.$black;
+  &:not(.dark) {
+    &.active {
+      color: theme.$white;
+    }
+    &:not(.active) {
+      color: theme.$black;
+    }
   }
 }
 
@@ -83,7 +83,6 @@
   &.dark {
     color: theme.$primary;
   }
-
   &:not(.dark) {
     color: theme.$black;
   }