@dnanpm/ui-components 0.6.0 → 0.8.0

package/dist/components/Footer/Footer.css

@@ -0,0 +1,473 @@
+@layer dds-components {/**
+ * The root carries data-color-scheme="dark" because the light-scheme focus
+ * ring puts focus-strong on the outer edge, which only reaches 2.42:1 against
+ * the plum surface and fails SC 1.4.11. The dark scope swaps the ring order
+ * so focus-soft sits outside at 10.49:1.
+ */
+
+._footer_1lum3_8 {
+    container-name: footer;
+    container-type: inline-size;
+    color: var(--color-semantic-foreground-inverse);
+    background: var(--color-semantic-surface-secondary-strong);
+}
+
+/* Zero specificity so modifier classes can still set their own colour. */
+:where(._footer_1lum3_8 a) {
+    color: inherit;
+}
+
+/* Resets the base list styles from styles/typography.css (li carries margin). */
+._footer_1lum3_8 ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+._footer_1lum3_8 li {
+    margin: 0;
+}
+
+._footer__inner_1lum3_31 {
+    max-width: 1280px;
+    margin-inline: auto;
+}
+
+._footer__top_1lum3_36,
+._footer__bottom_1lum3_37 {
+    padding: var(--spacing-space-32) var(--spacing-space-16);
+}
+
+@container footer (min-width: 768px) {
+    ._footer__top_1lum3_36,
+    ._footer__bottom_1lum3_37 {
+        padding: var(--spacing-space-40) var(--spacing-space-32);
+    }
+}
+
+@container footer (min-width: 1024px) {
+    ._footer__top_1lum3_36,
+    ._footer__bottom_1lum3_37 {
+        padding: var(--spacing-space-40) var(--spacing-space-40);
+    }
+}
+
+/* === Top section === */
+
+._footer__top_1lum3_36 {
+    background: var(--color-semantic-surface-secondary-mid);
+}
+
+._footer__top-row_1lum3_61 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-space-32);
+}
+
+@container footer (min-width: 768px) {
+    ._footer__top-row_1lum3_61 {
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: var(--spacing-space-32);
+    }
+}
+
+._footer__top-column_1lum3_76 {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    gap: var(--spacing-space-16);
+    min-width: 0;
+}
+
+._footer__top-heading_1lum3_84 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-space-20);
+    align-items: flex-start;
+}
+
+._footer__top-icon_1lum3_91 {
+    width: 48px;
+    height: 48px;
+    fill: currentColor;
+}
+
+._footer__top-title_1lum3_97 {
+    margin: 0;
+    font: var(--typography-heading-xs);
+}
+
+._footer__top-links_1lum3_102 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-space-8);
+    align-items: flex-start;
+}
+
+/* Removes the line box around the inline-flex child so the gap is exactly space/8. */
+._footer__top-links_1lum3_102 li,
+._footer__link-list_1lum3_111 li {
+    display: flex;
+}
+
+/* IconButton owns its own label typography and underline behaviour. */
+._footer__top-link_1lum3_102 {
+    max-width: 100%;
+}
+
+/* === Bottom section === */
+
+._footer__container_1lum3_122 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-space-40);
+}
+
+/*
+ * The accordion and column layouts are separate DOM branches toggled with
+ * display:none. A single <details> cannot serve both: forcing it open at
+ * desktop would leave <summary> focusable and announced as a collapsible
+ * button, which is wrong when the content is permanently visible. display:none
+ * removes the inactive branch from both the tab order and the a11y tree.
+ */
+._footer__nav-accordions_1lum3_135 {
+    display: block;
+}
+
+._footer__nav-columns_1lum3_139 {
+    display: none;
+}
+
+@container footer (min-width: 768px) {
+    ._footer__nav-accordions_1lum3_135 {
+        display: none;
+    }
+
+    ._footer__nav-columns_1lum3_139 {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: var(--spacing-space-32);
+    }
+}
+
+._footer__column_1lum3_156 {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    gap: var(--spacing-space-20);
+    min-width: 0;
+}
+
+._footer__column-heading_1lum3_164 {
+    margin: 0;
+    font: var(--typography-heading-xs);
+}
+
+._footer__link-list_1lum3_111 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-space-8);
+    align-items: stretch;
+}
+
+/*
+ * Navigation links fill their column row. Visually identical (text stays
+ * left-aligned) but it stops narrow labels sitting between wider neighbours,
+ * which leaves overlapping target regions under SC 2.5.8.
+ */
+._footer__link-list_1lum3_111 a,
+._footer__link-list_1lum3_111 button {
+    flex: 1 1 auto;
+}
+
+/*
+ * Underline styling comes from the shared text-decoration utility; only its
+ * visibility is toggled here, matching how IconButton handles the same case.
+ */
+._footer__link_1lum3_111,
+._footer__action_1lum3_191 {
+    display: inline-block;
+    max-width: 100%;
+    /* Keeps short labels such as "5G" at the 24px minimum target size (SC 2.5.8). */
+    min-width: 24px;
+    font: var(--typography-body-md);
+    overflow-wrap: anywhere;
+    text-decoration-color: transparent;
+}
+
+._footer__link_1lum3_111:hover,
+._footer__link_1lum3_111:focus-visible,
+._footer__action_1lum3_191:hover,
+._footer__action_1lum3_191:focus-visible {
+    color: var(--color-semantic-foreground-link-inverse-hover);
+    text-decoration-color: currentColor;
+}
+
+._footer__action_1lum3_191 {
+    padding: 0;
+    color: inherit;
+    background: none;
+    border: 0;
+    font-family: inherit;
+    text-align: start;
+    cursor: pointer;
+}
+
+/*
+ * Accordion navigation reuses AccordionItem's panel variant; only the padding
+ * is adjusted so link text aligns with the footer gutter. The block-start
+ * padding also keeps the first link off the ::details-content clip edge.
+ */
+._footer__accordion_1lum3_224 > summary {
+    padding-inline: 0;
+}
+
+._footer__accordion_1lum3_224 > summary + div {
+    padding-block: var(--spacing-space-8) var(--spacing-space-16);
+    padding-inline: 0;
+}
+
+/* === Divider === */
+
+._footer__divider_1lum3_235 {
+    height: 1px;
+    background: var(--color-semantic-border-neutral-mid);
+}
+
+/* The accordion branch already ends with a rule, so avoid doubling it. */
+@container footer (max-width: 767px) {
+    ._footer__divider--after-nav_1lum3_242 {
+        display: none;
+    }
+}
+
+/* === Meta row === */
+
+._footer__meta_1lum3_249 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-space-32);
+    align-items: center;
+}
+
+@container footer (min-width: 768px) {
+    ._footer__meta_1lum3_249 {
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: center;
+        gap: var(--spacing-space-24);
+    }
+}
+
+._footer__meta-center_1lum3_265 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-space-32);
+    align-items: center;
+    min-width: 0;
+    margin-inline: auto;
+}
+
+/* === Language selector === */
+
+._footer__language-list_1lum3_276 {
+    display: flex;
+    gap: var(--spacing-space-4);
+    align-items: center;
+    flex: 0 0 auto;
+}
+
+._footer__language_1lum3_276 {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    font: var(--typography-body-md-medium);
+    text-decoration: none;
+    border-radius: var(--radius-semantic-full);
+}
+
+._footer__language_1lum3_276:hover,
+._footer__language_1lum3_276:focus-visible {
+    background: var(--color-semantic-surface-secondary-soft);
+}
+
+/*
+ * The active entry is marked with aria-current plus a filled pill, so selection
+ * is never conveyed by colour alone.
+ */
+._footer__language--current_1lum3_303 {
+    color: var(--color-semantic-foreground-default);
+    background: var(--color-semantic-surface-base);
+}
+
+._footer__language--current_1lum3_303:hover,
+._footer__language--current_1lum3_303:focus-visible {
+    background: var(--color-semantic-surface-base);
+}
+
+/* === Social media === */
+
+._footer__social-list_1lum3_315 {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-space-16);
+    align-items: center;
+    justify-content: center;
+}
+
+._footer__social-link_1lum3_323 {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* Icons are 24px in the design; padding lifts the target to 32px. */
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius-semantic-full);
+}
+
+._footer__social-link_1lum3_323:hover,
+._footer__social-link_1lum3_323:focus-visible {
+    background: var(--color-semantic-surface-secondary-soft);
+}
+
+._footer__social-icon_1lum3_338 {
+    width: 24px;
+    height: 24px;
+    fill: currentColor;
+}
+
+/* === Organization selector === */
+
+._footer__organization-list_1lum3_346 {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-space-8);
+    align-items: center;
+    justify-content: center;
+}
+
+._footer__organization_1lum3_346 {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 28px;
+    padding: var(--spacing-space-4) var(--spacing-space-8);
+    font: var(--typography-body-sm);
+    text-decoration: none;
+    border-radius: var(--radius-semantic-full);
+}
+
+._footer__organization_1lum3_346:hover,
+._footer__organization_1lum3_346:focus-visible {
+    background: var(--color-semantic-surface-secondary-soft);
+}
+
+._footer__organization--current_1lum3_370 {
+    font: var(--typography-body-sm-medium);
+    color: var(--color-semantic-foreground-default);
+    background: var(--color-semantic-surface-base);
+}
+
+._footer__organization--current_1lum3_370:hover,
+._footer__organization--current_1lum3_370:focus-visible {
+    background: var(--color-semantic-surface-base);
+}
+
+/* === Legal links === */
+
+._footer__legal-list_1lum3_383 {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-space-8) var(--spacing-space-16);
+    align-items: center;
+    justify-content: center;
+}
+
+._footer__legal-list_1lum3_383 li {
+    display: flex;
+    gap: var(--spacing-space-16);
+    align-items: center;
+}
+
+/* Decorative; kept out of the accessibility tree by using ::before rather than a real element. */
+._footer__legal-list_1lum3_383 li + li::before {
+    content: '';
+    width: 1px;
+    height: 12px;
+    background: var(--color-semantic-foreground-inverse);
+}
+
+._footer__legal-list_1lum3_383 ._footer__link_1lum3_111,
+._footer__legal-list_1lum3_383 ._footer__action_1lum3_191,
+._footer__copyright_1lum3_407 {
+    font: var(--typography-body-sm);
+}
+
+/* === App badges === */
+
+._footer__apps_1lum3_413 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-space-8);
+    align-items: center;
+    flex: 0 0 auto;
+}
+
+@container footer (min-width: 768px) {
+    ._footer__apps_1lum3_413 {
+        align-items: flex-start;
+    }
+}
+
+._footer__apps-title_1lum3_427 {
+    font: var(--typography-body-md-medium);
+}
+
+._footer__badges_1lum3_431 {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-space-8);
+    justify-content: center;
+}
+
+@container footer (min-width: 768px) {
+    ._footer__badges_1lum3_431 {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
+
+._footer__badge_1lum3_431 {
+    display: inline-flex;
+    border-radius: var(--radius-semantic-md);
+}
+
+._footer__badge_1lum3_431 img {
+    display: block;
+    width: 140px;
+    height: 40px;
+    /*
+     * Store badges are brand artwork with mandated colours. Recolouring them in
+     * forced-colors mode would destroy the wordmark and Google's four-colour
+     * glyph. The badge is decorative (aria-hidden); the link keeps its
+     * accessible name and focus ring, so nothing is lost for these users.
+     */
+    forced-color-adjust: none;
+}
+
+@media (forced-colors: active) {
+    ._footer__divider_1lum3_235 {
+        background: CanvasText;
+    }
+
+    ._footer__language--current_1lum3_303,
+    ._footer__organization--current_1lum3_370 {
+        outline: 2px solid Highlight;
+    }
+}
+}

package/dist/components/Footer/Footer.d.ts

@@ -0,0 +1,3 @@
+import { FooterProps } from './Footer.types';
+export declare const Footer: ({ topSection, navigation, socialLinks, organizations, currentOrganizationId, languages, currentLanguageCode, appLinks, mandatoryLinks, copyrightLabel, renderLink, onChatOpen, onCookieSettingsClick, navigationLabel, socialLabel, organizationsLabel, languagesLabel, mandatoryLinksLabel, className, ref, ...props }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Footer.d.ts.map

package/dist/components/Footer/Footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/components/Footer/Footer.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAIR,WAAW,EAEd,MAAM,gBAAgB,CAAC;AAgCxB,eAAO,MAAM,MAAM,GAAI,yTAsBpB,WAAW,4CA2Sb,CAAC"}