Skip to content

project: Storybook audit #1337

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 25 commits into
base: develop
Choose a base branch
from
Draft

project: Storybook audit #1337

Show file tree
Hide file tree
Changes from 22 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
b3461f9
Input label
shreeyash07 Sep 2, 2024
864e757
ProgressBar
shreeyash07 Sep 3, 2024
49b6165
Modal
shreeyash07 Sep 9, 2024
8ab9209
- Breadcrumbs icon and weight changes
shreeyash07 Sep 10, 2024
a0555d2
Add stroke in pie chart
shreeyash07 Sep 10, 2024
a57a856
Add Missing stories and audit storybook
Sep 12, 2024
63a82a4
Update secondary tab new design
shreeyash07 Sep 16, 2024
8ac1ebd
change the styling of ui component stories
Sep 16, 2024
333dbf7
Add Close Button for infopopup component
Sep 17, 2024
b5288ad
Add gray tertiary button for button component
Sep 18, 2024
e5f5757
Update breadcrumb component
shreeyash07 Sep 19, 2024
f9f2d03
Update MultiSelectInput and InputContainer
shreeyash07 Sep 23, 2024
102a4d7
fix ActiveOperation filter action
shreeyash07 Sep 23, 2024
27a5b9b
fix header font size and table label color
Sep 23, 2024
3a1ca4b
Update Secondary tab stories for tab component
Sep 23, 2024
fd5e894
Add GoBreadcrumbs component
shreeyash07 Oct 1, 2024
98cfa26
Update footer stories and checkboxiconfill
Oct 2, 2024
72ab31f
Add select all and clear all button for Multiselect Input
shreeyash07 Oct 2, 2024
9a559ef
Update selectall button for multiselectinput
Oct 2, 2024
61b5625
Update orientaition of the dropdown
shreeyash07 Oct 8, 2024
36494fc
Add Key and label selector in breadcrumbs
shreeyash07 Oct 17, 2024
22fd1d4
Fix renderParams in stories
roshni73 Oct 18, 2024
a892214
Update and add missing design tokens
shreeyash07 Oct 23, 2024
1bb82e5
Fix table stories and default message
roshni73 Oct 28, 2024
a3ecadf
Fix textinput, validate button, dateinput
Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions app/src/components/GoBreadcrumbs/index.tsx
View file
Open in desktop
Copy link
Member

@tnagorra tnagorra Oct 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure if changing how we use Breadcrums is a good change.
cc: @frozenhelium @samshara

Copy link
Member

@frozenhelium frozenhelium Oct 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tnagorra Can you propose a better alternative. The requirement is that we need to separately style the leaf link.

Copy link
Member

@tnagorra tnagorra Nov 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like the leaf link is already styled differently in current approach as well.
We can use this new approach if we want more flexibility.

Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { useCallback } from 'react';
import { Breadcrumbs } from '@ifrc-go/ui';

import Link, { type InternalLinkProps } from '../Link';

interface RouteData {
to: InternalLinkProps['to'];
label: React.ReactNode;
urlParams?: Record<string, string | number | null | undefined>;
}

interface GoBreadcrumbsProps {
routeData: RouteData[];
}

const keySelector = (datum: RouteData) => datum.to;
const labelSelector = (datum: RouteData) => datum.label;

function GoBreadcrumbs(props: GoBreadcrumbsProps) {
const { routeData } = props;

const rendererParams = useCallback((_: RouteData['to'], item: RouteData)
: InternalLinkProps => (
{
to: item.to,
urlParams: item.urlParams,
}
), []);

return (
<Breadcrumbs
<
RouteData['to'],
RouteData,
(InternalLinkProps & { children: React.ReactNode })
>
data={routeData}
keySelector={keySelector}
labelSelector={labelSelector}
renderer={Link}
rendererParams={rendererParams}
/>
);
}

export default GoBreadcrumbs;
1 change: 1 addition & 0 deletions app/src/components/NavigationTab/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,7 @@ function NavigationTab(props: Props) {
)}
<div className={styles.childrenWrapper}>
{children}
<div className={styles.activeChildrenBorder} />
Copy link
Member

@tnagorra tnagorra Oct 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. Not sure if this is the right approach.
  2. This should only be added on certain variants.

Copy link
Collaborator Author

@shreeyash07 shreeyash07 Oct 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's only for primary variant. Styles condition are in corresponding styles file

</div>
{variant === 'primary' && (
<div className={styles.dummy} />
Expand Down
44 changes: 33 additions & 11 deletions app/src/components/NavigationTab/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,14 +135,42 @@
}
}


&.secondary {
border-right: var(--border-width) solid var(--border-color);
border-top-color: transparent;

.children-wrapper {
padding: var(--go-ui-spacing-md) var(--go-ui-spacing-lg);
}

&.active {
color: var(--go-ui-color-primary-red);
}

&:last-child {
border-color: transparent;
}
}

&.primary {
position: relative;
font-size: var(--go-ui-font-size-lg);

.children-wrapper {
display:flex;
flex-direction: column;
gap: var(--go-ui-spacing-sm);
border-bottom-color: var(--border-color);
background-color: var(--go-ui-color-background);
padding: var(--go-ui-spacing-md) var(--go-ui-spacing-lg);
padding: var(--go-ui-spacing-sm) var(--go-ui-spacing-lg) var(--go-ui-spacing-xs);

}

.active-children-border {
background-color: transparent;
width: 100%;
height: var(--go-ui-width-separator-small);
}

&.active {
Expand All @@ -152,6 +180,10 @@
border-color: var(--border-color);
border-bottom-color: transparent;
background-color: var(--go-ui-color-white);

.active-children-border {
background-color: var(--go-ui-color-primary-red);
}
}
}

Expand All @@ -162,16 +194,6 @@
}
}

&.secondary {
border-radius: var(--go-ui-border-radius-full);
padding: var(--go-ui-spacing-sm) var(--go-ui-spacing-xl);

&.active {
background-color: var(--go-ui-color-primary-red);
color: var(--go-ui-color-white);
}
}

&.tertiary {
&:not(.disabled) {
&:hover {
Expand Down
2 changes: 1 addition & 1 deletion app/src/components/domain/ActiveOperationMap/index.tsx
View file
Open in desktop
Copy link
Member

@tnagorra tnagorra Oct 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was this change required on the storybook audit?

Original file line number Diff line number Diff line change
Expand Up @@ -425,7 +425,7 @@ function ActiveOperationMap(props: Props) {
value={rawFilter.displacement}
onChange={setFilterField}
/>
<div>
<div className={styles.filterActions}>
<Button
name={undefined}
onClick={handleClearFiltersButtonclick}
Expand Down
3 changes: 3 additions & 0 deletions app/src/components/domain/ActiveOperationMap/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
.active-operation-map {
.filter-actions {
align-self: end;
}
.content {
position: relative;

Expand Down
61 changes: 36 additions & 25 deletions app/src/views/Country/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
} from 'react-router-dom';
import { PencilFillIcon } from '@ifrc-go/icons';
import {
Breadcrumbs,
Message,
NavigationTabList,
} from '@ifrc-go/ui';
Expand All @@ -23,7 +22,8 @@ import {
isTruthyString,
} from '@togglecorp/fujs';

import Link from '#components/Link';
import GoBreadcrumbs from '#components/GoBreadcrumbs';
import Link, { type InternalLinkProps } from '#components/Link';
import NavigationTab from '#components/NavigationTab';
import Page from '#components/Page';
import { adminUrl } from '#config';
Expand All @@ -43,6 +43,12 @@ import { useRequest } from '#utils/restRequest';
import i18n from './i18n.json';
import styles from './styles.module.css';

type BreadcrumbsDataType = {
to: InternalLinkProps['to'];
label: string;
urlParams?: Record<string, string | number | null | undefined>;
};

// eslint-disable-next-line import/prefer-default-export
export function Component() {
const { countryId } = useParams<{ countryId: string }>();
Expand Down Expand Up @@ -94,6 +100,33 @@ export function Component() {
{ countryName: country?.name ?? strings.countryPageTitleFallbackCountry },
);

const breadCrumbsData: BreadcrumbsDataType[] = useMemo(() => ([
{
to: 'home',
label: strings.home,
},
{
to: 'regionsLayout',
label: region?.region_name ?? '-',
urlParams: {
regionId: country?.region,
},
},
{
to: 'countriesLayout',
label: country?.name ?? '-',
urlParams: {
countryId,
},
},
]), [
strings.home,
region?.region_name,
country?.region,
countryId,
country?.name,
]);

if (isDefined(numericCountryId) && isRegion) {
const regionId = countryIdToRegionIdMap[numericCountryId];

Expand Down Expand Up @@ -143,29 +176,7 @@ export function Component() {
title={pageTitle}
heading={country?.name ?? '--'}
breadCrumbs={(
<Breadcrumbs>
<Link
to="home"
>
{strings.home}
</Link>
<Link
to="regionsLayout"
urlParams={{
regionId: country?.region,
}}
>
{region?.region_name}
</Link>
<Link
to="countriesLayout"
urlParams={{
countryId,
}}
>
{country?.name}
</Link>
</Breadcrumbs>
<GoBreadcrumbs routeData={breadCrumbsData} />
)}
description={
isDefined(countryResponse)
Expand Down
50 changes: 34 additions & 16 deletions app/src/views/Emergency/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
TargetedPopulationIcon,
} from '@ifrc-go/icons';
import {
Breadcrumbs,
Button,
KeyFigure,
NavigationTabList,
Expand All @@ -26,7 +25,8 @@ import {
listToMap,
} from '@togglecorp/fujs';

import Link from '#components/Link';
import GoBreadcrumbs from '#components/GoBreadcrumbs';
import Link, { type InternalLinkProps } from '#components/Link';
import NavigationTab from '#components/NavigationTab';
import Page from '#components/Page';
import { adminUrl } from '#config';
Expand All @@ -45,6 +45,12 @@ import {
import i18n from './i18n.json';
import styles from './styles.module.css';

type BreadcrumbsDataType = {
to: InternalLinkProps['to'];
label: string;
urlParams?: Record<string, string | number | null | undefined>;
};

/*
function getRouteIdFromName(text: string) {
return text.toLowerCase().trim().split(' ').join('-');
Expand Down Expand Up @@ -209,6 +215,29 @@ export function Component() {
].filter((tabInfo) => tabInfo.snippets.length > 0);
}, [emergencyResponse, emergencySnippetResponse]);

const breadCrumbsData: BreadcrumbsDataType[] = useMemo(() => ([
{
to: 'home',
label: strings.home,
},
{
to: 'emergencies',
label: strings.emergencies,
},
{
to: 'emergencyDetails',
label: emergencyResponse?.name ?? '-',
urlParams: {
emergencyId,
},
},
]), [
strings.home,
strings.emergencies,
emergencyId,
emergencyResponse?.name,
]);

const outletContext = useMemo<EmergencyOutletContext>(
() => ({
emergencyResponse,
Expand All @@ -225,20 +254,9 @@ export function Component() {
className={styles.emergency}
title={strings.emergencyPageTitle}
breadCrumbs={(
<Breadcrumbs>
<Link to="home">
{strings.home}
</Link>
<Link to="emergencies">
{strings.emergencies}
</Link>
<Link
to="emergencyDetails"
urlParams={{ emergencyId }}
>
{emergencyResponse?.name}
</Link>
</Breadcrumbs>
<GoBreadcrumbs
routeData={breadCrumbsData}
/>
)}
actions={isAuthenticated && (
<>
Expand Down
Loading