Merge pull request #3791 from webkom/ivarnakken/aba-135-improve-radio…

…button-component
webkom · Apr 16, 2023 · 8e85dfc · 8e85dfc
2 parents 503fd06 + 831d11f
commit 8e85dfc
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 150 deletions.
diff --git a/app/components/Form/RadioButton.css b/app/components/Form/RadioButton.css
@@ -1,90 +1,95 @@
-.box {
-  display: inline-flex;
-  width: 21px;
-  height: 21px;
+@import url('~app/styles/variables.css');
+
+.radioButton {
+  --border-hover: var(--color-gray-4);
+  --border-active: var(--lego-red-color);
+  --inner-circle: white;
+
+  position: relative;
 }
 
-/* Base for label styling */
-.input {
-  cursor: pointer;
-  position: absolute;
-  z-index: 1;
-  opacity: 0;
+.radioButton input,
+.radioButton svg {
+  width: 1.1rem;
+  height: 1.1rem;
+  display: block;
 }
 
 .label {
+  cursor: pointer;
+  user-select: none;
+}
+
+.radioButton input {
+  appearance: none;
   position: relative;
-  display: inline-block;
+  outline: none;
+  background: inherit;
+  border: none;
+  margin: 0;
+  padding: 0;
   cursor: pointer;
-  padding: 4px 26px;
+  border-radius: 50%;
+  transition: box-shadow var(--linear-medium);
+  box-shadow: inset 0 0 0 var(--s, 1px) var(--b, var(--border-gray));
+
+  &:disabled {
+    background-color: var(--additive-background);
+  }
 }
 
-.input:disabled,
-.input:disabled + .label {
-  cursor: default;
+.radioButton input:hover:not(:disabled) {
+  --s: 2px;
+  --b: var(--border-hover);
 }
 
-/* radio aspect */
-.label::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  width: 22px;
-  height: 22px;
-  border: 1px solid var(--border-gray);
-  background: var(--color-white);
-  border-radius: 11px;
-  box-shadow: inset 0 1px 3px
-    rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 30%);
+.radioButton input:checked:not(:disabled) {
+  --b: var(--border-active);
 }
 
-/* checked mark aspect */
-.label::after {
-  content: '';
+.radioButton svg {
+  pointer-events: none;
+  fill: none;
+  stroke-width: 2px;
+  stroke: var(--stroke, var(--border-active));
   position: absolute;
+  top: 0;
   left: 0;
-  width: 16px;
-  height: 16px;
-  border-radius: 8px;
-  background: var(--lego-red-color);
-  transition: all var(--linear-medium);
+  transform: scale(var(--scale, 1)) translateZ(0);
 }
 
-/* checked mark aspect changes */
-.input:not(:checked) + .label::after {
-  opacity: 0;
-  transform: scale(0) translate(11px, 11px);
-}
+.radioButton.path input:checked {
+  --s: 2px;
 
-.input:checked + .label::after {
-  opacity: 1;
-  transform: scale(1) translate(3px, 3px);
+  transition-delay: 0.2s;
 }
 
-/* disabled radio */
-.input:disabled:not(:checked) + .label::before,
-.input:disabled:checked + .label::before {
-  box-shadow: none;
-  border-color: var(--color-gray-4);
-  background-color: var(--color-gray-3);
+.radioButton.bounce svg {
+  --scale: 0;
 }
 
-.input:disabled:checked + .label::after {
-  color: var(--color-gray-5);
+.radioButton.bounce {
+  --stroke: var(--inner-circle);
 }
 
-.input:disabled + .label {
-  color: var(--color-gray-5);
+.radioButton.bounce input:checked {
+  --s: 11px;
 }
 
-/* hover style just for information */
-.input:not(:disabled):hover + .label::before {
-  border: 1px solid var(--border-gray) !important;
-  transition: border var(--linear-slow);
+.radioButton.bounce input:checked + svg {
+  animation: bounce var(--linear-medium) forwards 0.2s;
 }
 
-.radioField > label {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: flex-end;
+@keyframes bounce {
+  50% {
+    transform: scale(1.2);
+  }
+
+  75% {
+    transform: scale(0.9);
+  }
+
+  100% {
+    transform: scale(1);
+  }
 }
diff --git a/app/components/Form/RadioButton.tsx b/app/components/Form/RadioButton.tsx
@@ -28,18 +28,25 @@ function RadioButton({
   checked = inputValue ? inputValue === value : checked;
   value = inputValue ?? value;
   return (
-    <Flex gap={7} className={cx(styles.box, className)}>
-      <input
-        {...props}
-        className={styles.input}
-        checked={checked}
-        type="radio"
-        id={id}
-        value={value}
-      />
-      <label htmlFor={id} className={styles.label}>
-        {label}
-      </label>
+    <Flex wrap alignItems="center" gap={7}>
+      <div className={cx(styles.radioButton, styles.bounce, className)}>
+        <input
+          {...props}
+          className={styles.input}
+          checked={checked}
+          type="radio"
+          id={id}
+          value={value}
+        />
+        <svg viewBox="0 0 21 21">
+          <circle cx="10.5" cy="10.5" r="7" />
+        </svg>
+      </div>
+      {label && (
+        <label htmlFor={id} className={styles.label}>
+          {label}
+        </label>
+      )}
     </Flex>
   );
 }

diff --git a/app/routes/bdb/components/OptionsBox.tsx b/app/routes/bdb/components/OptionsBox.tsx
@@ -77,26 +77,22 @@ export default class OptionsBox extends Component<Props, State> {
                 display: this.state.active ? 'block' : 'none',
               }}
             >
-              <label>
-                <RadioButton
-                  name="active"
-                  id="active"
-                  inputValue={true}
-                  value={this.state.values.active}
-                  onChange={() => this.updateFilters('active', true)}
-                />
-                <span>Vis bare aktive bedrifter</span>
-              </label>
-              <label>
-                <RadioButton
-                  name="active"
-                  id="inactive"
-                  inputValue={false}
-                  value={this.state.values.active}
-                  onChange={() => this.updateFilters('active', false)}
-                />
-                <span>Vis bare inaktive bedrifter</span>
-              </label>
+              <RadioButton
+                name="active"
+                id="active"
+                label="Vis bare aktive bedrifter"
+                inputValue={true}
+                value={this.state.values.active}
+                onChange={() => this.updateFilters('active', true)}
+              />
+              <RadioButton
+                name="active"
+                id="inactive"
+                label="Vis bare inaktive bedrifter"
+                inputValue={false}
+                value={this.state.values.active}
+                onChange={() => this.updateFilters('active', false)}
+              />
             </div>
 
             <CheckBox

diff --git a/app/routes/joblistings/components/JoblistingRightNav.tsx b/app/routes/joblistings/components/JoblistingRightNav.tsx
@@ -150,64 +150,44 @@ const JoblistingsRightNav = (props: Props) => {
             <Button>Ny jobbannonse</Button>
           </Link>
         )}
+
         <h3 className={styles.rightHeader}>Sorter etter:</h3>
-        <label
-          htmlFor="deadline"
-          style={{
-            cursor: 'pointer',
+        <RadioButton
+          name="sort"
+          id="deadline"
+          label="Frist"
+          checked={order.deadline}
+          onChange={() => {
+            props.history.push({
+              pathname: '/joblistings',
+              search: qs.stringify(handleQuery('order', 'deadline')),
+            });
           }}
-        >
-          <RadioButton
-            name="sort"
-            id="deadline"
-            checked={order.deadline}
-            onChange={() => {
-              props.history.push({
-                pathname: '/joblistings',
-                search: qs.stringify(handleQuery('order', 'deadline')),
-              });
-            }}
-          />
-          Frist
-        </label>
-        <label
-          htmlFor="company"
-          style={{
-            cursor: 'pointer',
+        />
+        <RadioButton
+          name="sort"
+          id="company"
+          label="Bedrift"
+          checked={order.company}
+          onChange={() => {
+            props.history.push({
+              pathname: '/joblistings',
+              search: qs.stringify(handleQuery('order', 'company')),
+            });
           }}
-        >
-          <RadioButton
-            name="sort"
-            id="company"
-            checked={order.company}
-            onChange={() => {
-              props.history.push({
-                pathname: '/joblistings',
-                search: qs.stringify(handleQuery('order', 'company')),
-              });
-            }}
-          />
-          Bedrift
-        </label>
-        <label
-          htmlFor="createdAt"
-          style={{
-            cursor: 'pointer',
+        />
+        <RadioButton
+          name="sort"
+          id="createdAt"
+          label="Publisert"
+          checked={order.createdAt}
+          onChange={() => {
+            props.history.push({
+              pathname: '/joblistings',
+              search: qs.stringify(handleQuery('order', 'createdAt')),
+            });
           }}
-        >
-          <RadioButton
-            name="sort"
-            id="createdAt"
-            checked={order.createdAt}
-            onChange={() => {
-              props.history.push({
-                pathname: '/joblistings',
-                search: qs.stringify(handleQuery('order', 'createdAt')),
-              });
-            }}
-          />
-          Publisert
-        </label>
+        />
 
         <h3 className={styles.rightHeader}>Klassetrinn:</h3>
         {['1', '2', '3', '4', '5'].map((element) => (
@@ -220,7 +200,6 @@ const JoblistingsRightNav = (props: Props) => {
             history={props.history}
           />
         ))}
-
         <h3 className={styles.rightHeader}>Jobbtype:</h3>
         {jobTypes.map((el) => {
           return (
@@ -234,7 +213,6 @@ const JoblistingsRightNav = (props: Props) => {
             />
           );
         })}
-
         <h3 className={styles.rightHeader}>Sted:</h3>
         {['Oslo', 'Trondheim', 'Bergen', 'Tromsø', 'Annet'].map((element) => (
           <FilterLink

diff --git a/app/routes/users/components/UserConfirmation.tsx b/app/routes/users/components/UserConfirmation.tsx
@@ -120,7 +120,7 @@ const UserConfirmation = ({
             autocomplete="family-name"
             component={TextInput.Field}
           />
-          <RadioButtonGroup name="gender">
+          <RadioButtonGroup label="Kjønn" name="gender">
             <Field
               name="genderMan"
               label="Mann"