+ render: ({ title, content, fill, fillDarker, headingId }) => html`
+
${title}
@@ -75,3 +81,20 @@ export const Fill: Story = {
`,
},
};
+
+export const FillDarker: Story = {
+ ...Template,
+ args: {
+ title: "Section",
+ fillDarker: true,
+ content: html`
+
+ This section has a darker background using color-teal-20. Lorem ipsum
+ dolor sit amet, consectetur adipiscing elit. Pellentesque non augue
+ diam. Morbi nibh arcu, pulvinar sit amet erat ut, gravida imperdiet
+ erat.
+
+ ${Table.render?.call({})}
+ `,
+ },
+};
diff --git a/src/scss/components/table/_table.scss b/src/scss/components/table/_table.scss
index 8659033..b966044 100644
--- a/src/scss/components/table/_table.scss
+++ b/src/scss/components/table/_table.scss
@@ -23,6 +23,11 @@
td {
background-color: #fff;
}
+ &--plain {
+ th {
+ background-color: transparent;
+ }
+ }
td,
th {
border-right: 1px solid $color-teal-60;
@@ -48,3 +53,39 @@
text-transform: uppercase;
}
}
+
+.iati-table,
+.iati-file-card-table__header {
+ [aria-sort] {
+ cursor: pointer;
+ }
+
+ [aria-sort] button {
+ background: none;
+ border: 0;
+ padding: 0;
+ color: inherit;
+ font: inherit;
+ text-align: inherit;
+ cursor: pointer;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.25em;
+ }
+
+ [aria-sort] button::before {
+ content: "▴▾";
+ opacity: 0.4;
+ font-size: 0.8em;
+ }
+
+ [aria-sort="ascending"] button::before {
+ content: "▴";
+ opacity: 1;
+ }
+
+ [aria-sort="descending"] button::before {
+ content: "▾";
+ opacity: 1;
+ }
+}
diff --git a/src/scss/components/table/table.stories.ts b/src/scss/components/table/table.stories.ts
index 5e25e17..939e1e7 100644
--- a/src/scss/components/table/table.stories.ts
+++ b/src/scss/components/table/table.stories.ts
@@ -97,3 +97,41 @@ export const Scrolling: Story = {
`,
};
+
+export const Sortable: Story = {
+ render: () => html`
+
+
+
+
+ Name
+ Files
+ Size (kB)
+
+
+
+
+ Africalia
+ 11
+ 223.1
+
+
+ Alcis
+ 1
+ 14.89
+
+
+ BRAC
+ 27
+ 891.4
+
+
+ CAFOD
+ 3
+ 52.6
+
+
+
+
+ `,
+};
diff --git a/src/scss/layout/_index.scss b/src/scss/layout/_index.scss
index 38f1754..4c7e06d 100644
--- a/src/scss/layout/_index.scss
+++ b/src/scss/layout/_index.scss
@@ -1,3 +1,4 @@
@forward "page/page";
@forward "masonry/masonry";
@forward "landing-page/landing-page";
+@forward "publishers-page/publishers-page";
diff --git a/src/scss/layout/publishers-page/_publishers-page.scss b/src/scss/layout/publishers-page/_publishers-page.scss
new file mode 100644
index 0000000..2237170
--- /dev/null
+++ b/src/scss/layout/publishers-page/_publishers-page.scss
@@ -0,0 +1,208 @@
+@use "../../base/mixins";
+@use "../../tokens/screens" as *;
+@use "../../tokens/color" as *;
+
+.iati-publishers-page {
+ @include mixins.page-width-container();
+ background-color: white;
+ flex: 1;
+ padding-block: 1rem;
+}
+
+.iati-publishers-page__before-content {
+ margin-block-end: 1rem;
+ @media (min-width: $screen-md) {
+ margin-block-end: 2rem;
+ }
+ & > * + * {
+ margin-block-start: 1rem;
+ }
+}
+
+.iati-publishers-page__intro-row {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ border-bottom: 1px solid black;
+ padding-bottom: 1rem;
+ @media (min-width: $screen-lg) {
+ position: relative;
+ flex-direction: row;
+ align-items: flex-end;
+ gap: 2rem;
+ }
+}
+
+.iati-publishers-page__intro-text {
+ margin: 0;
+ color: $color-teal-90;
+ line-height: 25px;
+ @media (min-width: $screen-lg) {
+ width: 75%;
+ padding-right: 2rem;
+ }
+}
+
+.iati-publishers-page__intro-button {
+ @media (min-width: $screen-lg) {
+ position: absolute;
+ bottom: 1rem;
+ right: 0;
+ }
+
+ .iati-button {
+ white-space: nowrap;
+ }
+}
+
+.iati-publishers-page__content {
+ display: flex;
+ flex-direction: column-reverse;
+ gap: 1rem;
+ @media (min-width: $screen-md) {
+ flex-direction: row;
+ gap: 2rem;
+ }
+}
+
+.iati-publishers-page__article {
+ flex: 1;
+ min-width: 0;
+ & > * + * {
+ margin-top: 1rem;
+ @media (min-width: $screen-md) {
+ margin-top: 2rem;
+ }
+ }
+ > :first-child {
+ margin-top: 0;
+ }
+}
+
+.iati-publishers-page__side {
+ min-inline-size: 15rem;
+ flex-grow: 0;
+}
+
+.iati-publishers-page__side--sticky > * {
+ position: sticky;
+ top: 1rem;
+ margin-top: 20px;
+}
+
+.iati-publishers-page__after-content {
+ margin-block-start: 1rem;
+ @media (min-width: $screen-md) {
+ margin-block-start: 2rem;
+ }
+ & > * + * {
+ margin-block-start: 1rem;
+ @media (min-width: $screen-md) {
+ margin-top: 2rem;
+ }
+ }
+}
+
+.iati-publishers-page {
+ .iati-section__subheading {
+ font-size: 1.0625rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ }
+
+ .iati-section__header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 1rem;
+
+ .iati-section__subheading {
+ flex: 1;
+ }
+ }
+
+ .iati-table {
+ table,
+ tbody,
+ thead,
+ tfoot {
+ border-color: $color-grey-20;
+ }
+ td,
+ th {
+ border-right-color: $color-grey-20;
+ }
+ tr {
+ border-bottom-color: $color-grey-20;
+ }
+ th {
+ background-color: $color-teal-30;
+ }
+ &--plain th {
+ background-color: transparent;
+ }
+ }
+
+ .iati-subsection_intro {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ @media (min-width: $screen-lg) {
+ position: relative;
+ flex-direction: row;
+ align-items: flex-end;
+ gap: 2rem;
+ }
+
+ p {
+ margin: 0;
+
+ @media (min-width: $screen-lg) {
+ width: 75%;
+ }
+ }
+
+ .iati-button {
+ align-self: flex-start;
+
+ @media (min-width: $screen-lg) {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ }
+ }
+ }
+
+ .iati-publishers-page__data-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1rem;
+ margin-top: 1rem;
+
+ .iati-data-card {
+ max-width: 350px;
+ }
+
+ .iati-data-card--body {
+ justify-content: space-between;
+ flex: 1;
+
+ .iati-data-card__graph {
+ width: unset;
+ margin: 0;
+ }
+
+ .iati-button {
+ font-size: 14px;
+ }
+ }
+ }
+ .iati-button {
+ gap: 0.5rem;
+
+ .iati-icon--download {
+ height: 1.5rem;
+ }
+ }
+}
diff --git a/src/scss/layout/publishers-page/publishers-page.stories.ts b/src/scss/layout/publishers-page/publishers-page.stories.ts
new file mode 100644
index 0000000..73f7009
--- /dev/null
+++ b/src/scss/layout/publishers-page/publishers-page.stories.ts
@@ -0,0 +1,1118 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import { TwoLevel as Breadcrumb } from "../../components/breadcrumb/breadcrumb.stories";
+import { Footer } from "../../components/footer/footer.stories";
+import { Header } from "../../components/header/header.stories";
+import { Default as JumpMenu } from "../../components/jump-menu/jump-menu.stories";
+
+const meta: Meta = {
+ title: "Layout/Publishers Page",
+ parameters: {
+ layout: "fullscreen",
+ backgrounds: {
+ default: "grey",
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const PublishersPage: Story = {
+ render: (args, context) => html`
+ ${Header.render?.call({ ...args })}
+
+
+ ${Breadcrumb.render(
+ {
+ currentPageTitle: "Publisher Page",
+ previousPageTitles: ["Home", "Reporting Orgs"],
+ },
+ context,
+ )}
+
+
+
+
+
Reporting Org: Publisher Page
+
+
+ A text area next to their name for info and notes about their
+ own data, publishers provide information about their
+ organisation and the development or humanitarian activities they
+ are involved in. This includes details about the organisation
+ itself, as well as specific information about each activity,
+ like financial data, contextual information, and results.
+
+
+
+
+
+
+
+
+
+ On the registry
+
+
+
+ Reporting org on registry
+
+
+ BE-BCE_KBO-0474198059
+
+
+ Reporting org(s) in data
+
+
+ BE-BCE_KBO-0474198059
+
+
+
+
+ Hierarchies
+
+
+ 1 2
+
+
+ Licenses
+
+
+
+ Files failing scheme validation
+
+
0
+
+
+
+
+
+
+ Organisation files
+
+
1
+
+
+
Total file size
+
29.8kb
+
+
+
+
+ Unique activities
+
+
19
+
+
+
+
+
+
+
+
+
+
+
+
+ Description below chart showing changes over time
+
+
+
+ Download data (.JSON)
+
+
+
+
+
+
+
+
+
+
+ Funding breakdown by source
+
+
+
+ Download data (.JSON)
+
+
+
+
+
+
+
+
+
+
Most common sectors
+
+
+ Download data (.JSON)
+
+
+
+
+
+
+
+
+
+
Activities by country
+
+
+ Download data (.JSON)
+
+
+
+
+
+
+
+
+
+
Budget trends by year
+
+
+ Download data (.JSON)
+
+
+
+
+
+
+
+
+
+
Transaction patterns
+
+
+ Download data (.JSON)
+
+
+
+
+
+
+
+
+
+
+ Results reporting by quarter
+
+
+
+ Download data (.JSON)
+
+
+
+
+
+
+ Exploring Data
+
+
+
Files
+
+
+ This is a list of all the files the Reporting Organisation has
+ uploaded. Up to 50 words here explaining that the package name
+ might not accurately describe the data. You can access all
+ file information via an API.
+
+
+ Download API
+
+
+
+
+
+
+
+
+
+ Africalia-Activities
+
+
11
+
0
+
223.1 kb
+
+
+
+
+
+ Download API
+
+
+
Activity count
+
Org count
+
Total size
+
IATI version
+
+
+
+
+
+
+
Alcis-Am
+
1
+
0
+
14.89 kb
+
+
+
+
+
+ Download API
+
+
+ Download from Reporting Org.
+
+
+
+
+
+
+ A short chart
description here
+
+
+
+
+
+
+
+ A short chart
description here
+
+
+
+
+
+
+
+ chart description might go over more than 1 or
2
+ lines
+
+
+
+
+
+
+
+ chart
description
+
+
+
+
+
+
+
+
+
+
Africalia-Org
+
1
+
0
+
14.89 kb
+
2.03
+
+
+
+
+ Download API
+
+
+
Activity count
+
Org count
+
Total size
+
IATI version
+
+
+
+
+
+
+
+
+
+
+ Organisation Identifiers
+
+
+
+
+
+
+ Org Type
+
+ Total
+
+ Self Refs
+
+ Excluding Self Refs
+
+
+
+ Org Elements
+
+
+ Refs
+
+
+ Non-Empty Refs
+
+
+ Org Elements
+
+
+ Refs
+
+
+ Non-Empty Refs
+
+
+ Valid Refs
+
+
+ Provided
+
+
+
+
+
+ Accountable
+ 19
+ 19
+ 19
+ 19
+ 0
+ 0
+ 0
+ 0
+ 0
+
+
+ Extending
+ 0
+ 0
+ 0
+ 0
+ 0
+ 0
+ 0
+ 0
+ 0
+
+
+ Funding
+ 27
+ 27
+ 27
+ 8
+ 19
+ 19
+ 19
+ 19
+ 100
+
+
+ Implementing
+ 37
+ 12
+ 12
+ 11
+ 26
+ 1
+ 1
+ 1
+ 4
+
+
+ Provider
+ 181
+ 181
+ 181
+ 122
+ 59
+ 59
+ 59
+ 54
+ 92
+
+
+ Receiver
+ 159
+ 40
+ 40
+ 29
+ 130
+ 11
+ 11
+ 10
+ 8
+
+
+
+
+
+
+
Financial
+
+
Budgets
+
+ The below figures are calculated based on the data contained
+ within the <budget> element for each reported activity.
+ Original and revised elements are based on the value declared in
+ the budget/@type attribute. Where budgets fall across two
+ calendar years, the month of the <period-end> date is used
+ to determine annual groupings, with budgets for periods ending
+ January–June added to the previous calendar year.
+
+
+
+
+
+ Year
+
+ Count (all)
+
+
+ Sum (all)
+
+
+ Count (Original)
+
+
+ Sum (Original)
+
+
+ Count (Revised)
+
+
+ Sum (Revised)
+
+
+
+
+
+ 2021
+ 4
+ 1,250,000
+ 3
+ 900,000
+ 1
+ 350,000
+
+
+ 2022
+ 6
+ 1,820,500
+ 5
+ 1,500,500
+ 1
+ 320,000
+
+
+ 2023
+ 7
+ 2,140,750
+ 5
+ 1,640,750
+ 2
+ 500,000
+
+
+ 2024
+ 5
+ 1,675,000
+ 4
+ 1,275,000
+ 1
+ 400,000
+
+
+
+
+
+
+
+ ${JumpMenu.render(
+ {
+ items: [
+ { text: "Headlines", link: "#headlines" },
+ { text: "Publisher Data", link: "#publisherData" },
+ { text: "Codelist values", link: "#codelistValues" },
+ {
+ text: "Elements and attributes",
+ link: "#elementsAttributes",
+ },
+ { text: "Organisation identifiers", link: "#orgIdentifiers" },
+ { text: "Financial", link: "#financial" },
+ ],
+ },
+ context,
+ )}
+
+
+ ${Footer.render?.call({ ...args })}
+ `,
+};