Skip to content

Commit

Permalink
Merge pull request #322 from mlibrary/LIBSEARCH-1031-account-update-s…
Browse files Browse the repository at this point in the history
…ettings-display-to-match-figma-diagram

[LIBSEARCH-1031] ACCOUNT: Update Settings display to match Figma diagram
niquerio authored Jan 29, 2025
2 parents e8c0619 + 264d026 commit fa62f7e
Showing 17 changed files with 66 additions and 100 deletions.
Empty file modified .github/pre-commit
100755 → 100644
Empty file.
54 changes: 28 additions & 26 deletions css/_controls.scss
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@
input:not([type="checkbox"]):not([type="radio"]) {
font-size: 1rem;
font-family: var(--font-base-family);
border: solid 1px rgba(0, 0, 0, 0.3);
border: solid 1px var(--color-neutral-200);
border-radius: var(--radius-default);
padding: 0.75rem;
margin: 0;
@@ -12,7 +12,7 @@ input:not([type="checkbox"]):not([type="radio"]) {
border-color: var(--color-pink-500);
}
&:not(:focus) {
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 4px var(--color-neutral-100);
}
}

@@ -60,35 +60,37 @@ select::-ms-expand {
display: none;
}

fieldset {
display: flex;
gap: 0.5rem;
flex-direction: column;
}

input[type="checkbox"],
input[type="radio"] {
accent-color: var(--color-teal-400);
border-radius: 0.125rem;
height: 1rem;
width: 1rem;
}

input[type="radio"] {
border-radius: 50%;
}

.radio-option {
input[type="radio"] {
&:checked + label span.radio-button-unchecked,
&:not(:checked) + label span.radio-button-checked,
display: grid;
gap: 0.5rem;
grid-template-columns: auto 1fr;
grid-template-rows: auto;
& > input[type="radio"] {
grid-row: 1 / -1;
&:not(:checked) ~ .radio-option-extra {
display: none;
}
&:not(:checked) + label {
@include icons.material-symbols {
color: var(--color-neutral-300);
}
}
&:focus + label {
outline: 0;
box-shadow: 0 0 0 2px var(--color-maize-400),0 0 0 3px var(--color-neutral-400);
border-radius: 2px;
}
}
@include icons.material-symbols {
color: var(--color-teal-500);
margin-right: 0.25rem;
}
.radio-option-extra {
margin-top: 1rem;
padding-left: 1.5rem;
position: relative;
@include icons.material-symbols {
color: inherit;
}
& > .radio-option-extra {
grid-column: 2 / 3;
}
}

15 changes: 10 additions & 5 deletions css/_dropdown.scss
Original file line number Diff line number Diff line change
@@ -24,18 +24,23 @@
gap: 0.25rem;
font-weight: normal;
padding: 0;
@include breakpoints.breakpoint('medium') {
&[aria-expanded="true"] > .username {
text-decoration: underline;
text-decoration-thickness: 0.125rem;
&[aria-expanded="true"] {
& > .material-symbols-rounded {
transform: rotate(180deg);
}
@include breakpoints.breakpoint('medium') {
& > .username {
text-decoration: underline;
text-decoration-thickness: 0.125rem;
}
}
}
}

.dropdown-container {
@include breakpoints.breakpoint('medium') {
background: white;
border-radius: 0.25rem;
border-radius: 0.25rem;
box-shadow: var(--z-space-medium);
padding: 1rem 1.5rem;
position: absolute;
6 changes: 0 additions & 6 deletions css/_focus.scss

This file was deleted.

4 changes: 4 additions & 0 deletions css/_icons.scss
Original file line number Diff line number Diff line change
@@ -9,3 +9,7 @@
position: relative;
top: 0.125rem;
};

.icon__filled {
font-variation-settings: 'FILL' 1
}
11 changes: 0 additions & 11 deletions css/_text-notifications.scss

This file was deleted.

3 changes: 1 addition & 2 deletions css/index.scss
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
@use "defaults";
@use "base";
@use "utilities";
@use "focus";
@use "skip-links";
@use "site-navigation";
@use "horizontal-navigation";
@use "icons";
@use "dropdown";
@use "site-footer";
@use "overview-cards";
@use "empty-state-container";
@use "tables";
@use "pagination";
@use "messages";
@use "text-notifications";
@use "tags";
@use "banner";
@use "renew";
9 changes: 2 additions & 7 deletions js/index.js
Original file line number Diff line number Diff line change
@@ -98,13 +98,8 @@
// Toggle `aria-expanded` as true or false
getAriaExpanded = !getAriaExpanded;
event.target.setAttribute('aria-expanded', getAriaExpanded);
// Toggle display for dropdown and arrow keys
const getArrowKeys = [...dropdown.children].filter((arrowKey) => {
return arrowKey.innerText.startsWith('keyboard_arrow_');
});
[getDropdown, ...getArrowKeys].forEach((toggle) => {
toggle.style.display = toggle.style.display === 'block' ? 'none' : 'block';
});
// Toggle display for dropdown
getDropdown.style.display = getDropdown.style.display === 'block' ? 'none' : 'block';
});
// Close dropdown if `Escape` has been pressed or clicked outside of dropdown
['click', 'keyup'].forEach((listener) => {
2 changes: 1 addition & 1 deletion lib/circulation_history_settings_text.rb
Original file line number Diff line number Diff line change
@@ -51,7 +51,7 @@ class UndecidedKeepHistory < CirculationHistorySettingsText
private

def text
"Weve been preserving your #{checkout_history} since spring 2016, which includes any items owned by the U-M Library that you have checked out. You can download your checkout history as a CSV file here. Learn more about checkout history options in our [Privacy Statement](https://lib.umich.edu/about-us/policies/library-privacy-statement/checkout-history-options) and update your preferences below."
"We've been preserving your #{checkout_history} since spring 2016, which includes any items owned by the U-M Library that you have checked out. You can download your checkout history as a CSV file here. Learn more about checkout history options in our [Privacy Statement](https://lib.umich.edu/about-us/policies/library-privacy-statement/checkout-history-options) and update your preferences below."
end
end

2 changes: 1 addition & 1 deletion views/account-overview/index.erb
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@
<p class="overview-card-description"><%=card.description%></p>
</div>
<div class="overview-card-icon-container" style="--overview-card-icon-background-color: var(--color-<%=card.color%>-100); --overview-card-icon-color: var(--color-<%=card.color%>-500);">
<span class="material-symbols-rounded" aria-hidden="true"><%=card.icon_name%></span>
<span class="material-symbols-rounded icon__filled" aria-hidden="true"><%=card.icon_name%></span>
</div>
</a>
</li>
12 changes: 3 additions & 9 deletions views/fines-and-fees/index.erb
Original file line number Diff line number Diff line change
@@ -38,34 +38,28 @@
<h2>How much would you like to pay today?</h2>
<fieldset class="owl">
<fieldset>
<legend class="visually-hidden">Pick a payment amount option</legend>
<div class="radio-option">
<input
type="radio"
name="pay_in_full"
class="visually-hidden"
id="pay-all"
value="true"
>
<label for="pay-all">
<span class="material-symbols-sharp radio-button-checked" aria-hidden="true">radio_button_checked</span>
<span class="material-symbols-sharp radio-button-unchecked" aria-hidden="true">radio_button_unchecked</span>
<span>Pay full amount (<span class="strong">$<%=fines.total_sum_in_dollars%></span>)</span>
Pay full amount (<span class="strong">$<%=fines.total_sum_in_dollars%></span>)
</label>
</div>
<div class="radio-option">
<input
type="radio"
name="pay_in_full"
class="visually-hidden"
id="pay-some"
value="false"
>
<label for="pay-some">
<span class="material-symbols-sharp radio-button-checked" aria-hidden="true">radio_button_checked</span>
<span class="material-symbols-sharp radio-button-unchecked" aria-hidden="true">radio_button_unchecked</span>
<span>Pay partial amount</span>
Pay partial amount
</label>
<div id="pay-some-amount" class="radio-option-extra">
<span>$</span>
9 changes: 3 additions & 6 deletions views/layout.erb
Original file line number Diff line number Diff line change
@@ -22,20 +22,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,600,0..1,200&icon_names=attach_money,book,close,date_range,history,home,info,keyboard_arrow_down,keyboard_arrow_left,keyboard_arrow_right,open_in_new,person,settings,warning" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@umich-lib/web@latest/umich-lib.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,600,1,0..200">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@48,600,0,0..200">
<link href='/bundles/index.css' rel="stylesheet" />
<link href="/bundles/index.css" rel="stylesheet" />

<script type="module" src="https://cdn.jsdelivr.net/npm/@umich-lib/web@latest/dist/umich-lib/umich-lib.esm.js"></script>

<%
title = Navigation::Title.for(request.path_info)
%>
<title><%= title %> | University of Michigan Library</title>
<%
description = Navigation::Description.for(request.path_info)
%>
<title><%= title %> | University of Michigan Library</title>
<meta name="description" content="<%= description %>"/>
<meta name="version" content="<%=S.version%>">

2 changes: 1 addition & 1 deletion views/layout/banner.erb
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<% if session[:confirmed_history_setting] == false %>
<section class="banner">
<div class="layout">
<p><span class="material-symbols-sharp" aria-hidden="true">info</span> You have not yet specified whether you would like us to record your checkout history. You can update your preferences on the <a href="/settings">Settings</a> page.</p>
<p><span class="material-symbols-rounded" aria-hidden="true">info</span> You have not yet specified whether you would like us to record your checkout history. You can update your preferences on the <a href="/settings">Settings</a> page.</p>
</div>
</section>
<% end %>
2 changes: 1 addition & 1 deletion views/layout/navigation.erb
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@
<% my_pages.pages.each do |page| %>
<li class="<%= page.active %>">
<a href="<%=page.path%>" <% if page.active? %>aria-current="page"<% end %>>
<span class="material-symbols-rounded" aria-hidden="true"><%=page.icon_name%></span><span><%=page.title%></span><%= erb :'components/open_in_new', locals: { title: page.title } %>
<span class="material-symbols-rounded icon__filled" aria-hidden="true"><%=page.icon_name%></span><span><%=page.title%></span><%= erb :'components/open_in_new', locals: { title: page.title } %>
</a>
</li>
<% end %>
5 changes: 2 additions & 3 deletions views/layout/user_drop_down.erb
Original file line number Diff line number Diff line change
@@ -3,10 +3,9 @@
<% if session[:uniqname] %>
<nav class="user-navigation dropdown" aria-label="User Dropdown Navigation">
<button aria-expanded="false" data-dropdown="user-nav-dropdown" class="button--dropdown">
<span class="material-symbols-sharp" aria-hidden="true">person</span>
<span class="material-symbols-rounded" aria-hidden="true">person</span>
<span class="username"><%=session[:uniqname]%></span>
<span class="material-symbols-rounded" style="display: block;" aria-hidden="true">keyboard_arrow_down</span>
<span class="material-symbols-rounded" style="display: none;" aria-hidden="true">keyboard_arrow_up</span>
<span class="material-symbols-rounded" aria-hidden="true">keyboard_arrow_down</span>
</button>
<div class="navigation-lists dropdown-container" id="user-nav-dropdown" style="display: none;">
<ul class="site-navigation-list">
2 changes: 1 addition & 1 deletion views/settings/_modal.erb
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@
</button>
<% if modal[:state] %>
<div class="modal-icon state-<%= modal[:state] %>">
<span class="material-symbols-rounded" aria-hidden="true">warning</span>
<span class="material-symbols-rounded icon__filled" aria-hidden="true">warning</span>
</div>
<% end %>
<div class="modal-content owl">
28 changes: 8 additions & 20 deletions views/settings/index.erb
Original file line number Diff line number Diff line change
@@ -43,39 +43,33 @@
<h2>Checkout History</h2>
<%=patron.circulation_history_text%>
<a class="button" href="/past-activity/u-m-library/download.csv" style="display: inline-block">Download checkout history (CSV file)</a>
<p>If youd like to continue to keep a record of your checkout history, you can select that option now. If you prefer to have your checkout history deleted and no longer record future checkouts, you can opt out.</p>
<p>If you'd like to continue to keep a record of your checkout history, you can select that option now. If you prefer to have your checkout history deleted and no longer record future checkouts, you can opt out.</p>
<p>You can change this preference at any time.</p>

<fieldset class="owl">
<fieldset>
<legend class="visually-hidden">Do you wish to record your checkout history?</legend>
<div class="radio-option">
<input
type="radio"
name="retain_history"
class="visually-hidden"
id="opt-in"
value="true"
<% if patron.confirmed_history_setting? && patron.retain_history? %>checked<% end %>
>
<label for="opt-in">
<span class="material-symbols-sharp radio-button-checked" aria-hidden="true">radio_button_checked</span>
<span class="material-symbols-sharp radio-button-unchecked" aria-hidden="true">radio_button_unchecked</span>
<span>Yes, record my checkout history</span>
Yes, record my checkout history
</label>
</div>
<div class="radio-option">
<input
type="radio"
name="retain_history"
class="visually-hidden"
id="opt-out"
value="false"
<% if patron.confirmed_history_setting? && !patron.retain_history? %>checked<% end %>
>
<label for="opt-out">
<span class="material-symbols-sharp radio-button-checked" aria-hidden="true">radio_button_checked</span>
<span class="material-symbols-sharp radio-button-unchecked" aria-hidden="true">radio_button_unchecked</span>
<span>No, do not record my checkout history and delete my past checkout history</span>
No, do not record my checkout history and delete my past checkout history
</label>
</div>
</fieldset>
@@ -104,24 +98,21 @@

<p>Add a phone number to receive text notifications on the status of your request and loans. Special collections requests are not included. Message and data rates may apply.</p>

<fieldset class="owl">
<fieldset>
<legend class="visually-hidden">Do you wish to receive text notifications?</legend>
<div class="radio-option">
<input
type="radio"
name="text-notifications"
class="visually-hidden"
id="confirm-sms"
value="on"
<% if patron.sms_number? %>checked<% end%>
>
<label for="confirm-sms">
<span class="material-symbols-sharp radio-button-checked" aria-hidden="true">radio_button_checked</span>
<span class="material-symbols-sharp radio-button-unchecked" aria-hidden="true">radio_button_unchecked</span>
<span>Yes, please send me text notifications</span>
Yes, please send me text notifications
</label>
<div class="radio-option-extra">
<label class="text-notifications-label" for="sms-number">
<label for="sms-number">
Phone number
</label>
<input
@@ -143,15 +134,12 @@
<input
type="radio"
name="text-notifications"
class="visually-hidden"
id="deny-sms"
value="off"
<% if !patron.sms_number? %>checked<% end%>
>
<label for="deny-sms">
<span class="material-symbols-sharp radio-button-checked" aria-hidden="true">radio_button_checked</span>
<span class="material-symbols-sharp radio-button-unchecked" aria-hidden="true">radio_button_unchecked</span>
<span>No, do not send me text notifications</span>
No, do not send me text notifications
</label>
</div>
</fieldset>

0 comments on commit fa62f7e

Please sign in to comment.