@dta-au/civictheme-twig 1.13.4 → 1.13.5

package/assets/icons/padlock.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.75 8.25V6.75a5.25 5.25 0 0 1 10.5 0v1.5h.75a2.25 2.25 0 0 1 2.25 2.25v8.25A2.25 2.25 0 0 1 18 21H6a2.25 2.25 0 0 1-2.25-2.25V10.5A2.25 2.25 0 0 1 6 8.25h.75Zm2 0h6.5V6.75a3.25 3.25 0 0 0-6.5 0v1.5ZM12 13a1.5 1.5 0 0 0-.75 2.8v1.45a.75.75 0 0 0 1.5 0V15.8A1.5 1.5 0 0 0 12 13Z"/>
+</svg>

package/components/02-molecules/link-list-card/__snapshots__/link-list-card.test.js.snap

@@ -0,0 +1,444 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Link List Card applies theme class 1`] = `
+<div>
+  
+
+
+
+  
+  <div
+    class="ct-link-list-card ct-theme-dark ct-link-list-card--default"
+    data-component-name="ct-link-list-card"
+  >
+    
+          
+      
+    <a
+      class="ct-link-list-card__link"
+      href="https://example.com"
+    >
+      
+        
+      <span
+        class="ct-link-list-card__title"
+      >
+        Link
+      </span>
+      
+
+        
+        
+        
+        
+      <span
+        aria-hidden="true"
+        class="ct-link-list-card__icon"
+      >
+        
+          
+        <svg
+          aria-hidden="true"
+          class="ct-icon ct-icon--size-small"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          
+
+          <path
+            d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z"
+          />
+          
+
+        </svg>
+        
+        
+      </span>
+      
+      
+    </a>
+    
+      
+  </div>
+  
+
+</div>
+`;
+
+exports[`Link List Card authenticated variant adds its modifier class 1`] = `
+<div>
+  
+
+
+
+  
+  <div
+    class="ct-link-list-card ct-theme-light ct-link-list-card--authenticated"
+    data-component-name="ct-link-list-card"
+  >
+    
+          
+      
+    <a
+      class="ct-link-list-card__link"
+      href="https://example.com/secure"
+    >
+      
+        
+      <span
+        class="ct-link-list-card__title"
+      >
+        Secure document
+      </span>
+      
+
+        
+        
+        
+        
+      <span
+        aria-hidden="true"
+        class="ct-link-list-card__icon"
+      >
+        
+          
+        <svg
+          aria-hidden="true"
+          class="ct-icon ct-icon--size-small"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          
+
+          <path
+            clip-rule="evenodd"
+            d="M6.75 8.25V6.75a5.25 5.25 0 0 1 10.5 0v1.5h.75a2.25 2.25 0 0 1 2.25 2.25v8.25A2.25 2.25 0 0 1 18 21H6a2.25 2.25 0 0 1-2.25-2.25V10.5A2.25 2.25 0 0 1 6 8.25h.75Zm2 0h6.5V6.75a3.25 3.25 0 0 0-6.5 0v1.5ZM12 13a1.5 1.5 0 0 0-.75 2.8v1.45a.75.75 0 0 0 1.5 0V15.8A1.5 1.5 0 0 0 12 13Z"
+            fill-rule="evenodd"
+          />
+          
+
+        </svg>
+        
+        
+      </span>
+      
+      
+    </a>
+    
+      
+  </div>
+  
+
+</div>
+`;
+
+exports[`Link List Card deactivated card is non-interactive with no href 1`] = `
+<div>
+  
+
+
+
+  
+  <div
+    class="ct-link-list-card ct-theme-light ct-link-list-card--authenticated ct-link-list-card--deactivated"
+    data-component-name="ct-link-list-card"
+  >
+    
+          
+      
+    <a
+      aria-disabled="true"
+      class="ct-link-list-card__link"
+      tabindex="-1"
+    >
+      
+        
+      <span
+        class="ct-link-list-card__title"
+      >
+        Locked resource
+      </span>
+      
+
+        
+        
+        
+        
+      <span
+        aria-hidden="true"
+        class="ct-link-list-card__icon"
+      >
+        
+          
+        <svg
+          aria-hidden="true"
+          class="ct-icon ct-icon--size-small"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          
+
+          <path
+            clip-rule="evenodd"
+            d="M6.75 8.25V6.75a5.25 5.25 0 0 1 10.5 0v1.5h.75a2.25 2.25 0 0 1 2.25 2.25v8.25A2.25 2.25 0 0 1 18 21H6a2.25 2.25 0 0 1-2.25-2.25V10.5A2.25 2.25 0 0 1 6 8.25h.75Zm2 0h6.5V6.75a3.25 3.25 0 0 0-6.5 0v1.5ZM12 13a1.5 1.5 0 0 0-.75 2.8v1.45a.75.75 0 0 0 1.5 0V15.8A1.5 1.5 0 0 0 12 13Z"
+            fill-rule="evenodd"
+          />
+          
+
+        </svg>
+        
+        
+      </span>
+      
+      
+    </a>
+    
+      
+  </div>
+  
+
+</div>
+`;
+
+exports[`Link List Card external link opens in a new window with rel and hidden notice 1`] = `
+<div>
+  
+
+
+
+  
+  <div
+    class="ct-link-list-card ct-theme-light ct-link-list-card--default"
+    data-component-name="ct-link-list-card"
+  >
+    
+          
+      
+    <a
+      class="ct-link-list-card__link"
+      href="https://x.org"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      
+        
+      <span
+        class="ct-link-list-card__title"
+      >
+        External
+      </span>
+      
+
+        
+                  
+      <span
+        class="ct-visually-hidden"
+      >
+         (opens in a new tab)
+      </span>
+      
+        
+        
+        
+      <span
+        aria-hidden="true"
+        class="ct-link-list-card__icon"
+      >
+        
+          
+        <svg
+          aria-hidden="true"
+          class="ct-icon ct-icon--size-small"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          
+
+          <path
+            d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z"
+          />
+          
+
+        </svg>
+        
+        
+      </span>
+      
+      
+    </a>
+    
+      
+  </div>
+  
+
+</div>
+`;
+
+exports[`Link List Card renders a single link card 1`] = `
+<div>
+  
+
+
+
+  
+  <div
+    class="ct-link-list-card ct-theme-light ct-link-list-card--default"
+    data-component-name="ct-link-list-card"
+  >
+    
+          
+      
+    <a
+      class="ct-link-list-card__link"
+      href="https://example.com/apply"
+    >
+      
+        
+      <span
+        class="ct-link-list-card__title"
+      >
+        Apply for a grant
+      </span>
+      
+
+        
+        
+        
+        
+      <span
+        aria-hidden="true"
+        class="ct-link-list-card__icon"
+      >
+        
+          
+        <svg
+          aria-hidden="true"
+          class="ct-icon ct-icon--size-small"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          
+
+          <path
+            d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z"
+          />
+          
+
+        </svg>
+        
+        
+      </span>
+      
+      
+    </a>
+    
+      
+  </div>
+  
+
+</div>
+`;
+
+exports[`Link List Card renders attributes 1`] = `
+<div>
+  
+
+
+
+  
+  <div
+    class="ct-link-list-card ct-theme-light ct-link-list-card--default"
+    data-component-name="ct-link-list-card"
+    data-test="value"
+  >
+    
+          
+      
+    <a
+      class="ct-link-list-card__link"
+      href="https://example.com"
+    >
+      
+        
+      <span
+        class="ct-link-list-card__title"
+      >
+        Link
+      </span>
+      
+
+        
+        
+        
+        
+      <span
+        aria-hidden="true"
+        class="ct-link-list-card__icon"
+      >
+        
+          
+        <svg
+          aria-hidden="true"
+          class="ct-icon ct-icon--size-small"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          
+
+          <path
+            d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z"
+          />
+          
+
+        </svg>
+        
+        
+      </span>
+      
+      
+    </a>
+    
+      
+  </div>
+  
+
+</div>
+`;
+
+exports[`Link List Card renders nothing without a title 1`] = `
+<div>
+  
+
+
+
+
+</div>
+`;
+
+exports[`Link List Card renders nothing without a url 1`] = `
+<div>
+  
+
+
+
+
+</div>
+`;

package/components/02-molecules/link-list-card/link-list-card.scss

@@ -0,0 +1,85 @@
+//
+// CivicTheme Link List Card component styles.
+//
+
+.ct-link-list-card {
+  $root: &;
+
+  & {
+    // Tighter, more defined card shadow than the elevation ramp's level 2
+    // (same 4px offset, half the blur). Tokenised with ct-particle() so it
+    // tracks the particle base rather than hardcoding rem/rgba.
+    box-shadow: 0 ct-particle(0.5) ct-particle(1) rgba(0, 0, 0, 20%);
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: var(--ct-link-list-card-border-radius);
+    overflow: hidden;
+  }
+
+  // Interactive cards lift on hover and press in on active, keeping the same
+  // crisp blur as the resting shadow; deactivated cards stay at rest.
+  &:not(#{$root}--deactivated) {
+    &:hover {
+      box-shadow: 0 ct-particle(1) ct-particle(2) rgba(0, 0, 0, 20%);
+    }
+
+    &:active {
+      box-shadow: 0 ct-particle(0.25) ct-particle(0.5) rgba(0, 0, 0, 25%);
+    }
+  }
+
+  #{$root}__link {
+    @include ct-typography('label-regular');
+    @include ct-link-no-decoration();
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: ct-spacing(1);
+    padding: ct-spacing(3);
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &:focus-visible {
+      @include ct-outline();
+    }
+  }
+
+  #{$root}__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  // Deactivated: non-interactive, no hover affordance. The padlock stays.
+  &--deactivated {
+    #{$root}__link {
+      cursor: default;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    @include ct-component-property($root, $theme, background-color);
+
+    #{$root}__link {
+      @include ct-component-property($root, $theme, link, color);
+
+      &:hover {
+        @include ct-component-property($root, $theme, link, hover, color);
+      }
+    }
+
+    &#{$root}--deactivated {
+      #{$root}__link,
+      #{$root}__link:hover {
+        @include ct-component-property($root, $theme, deactivated, link, color);
+      }
+    }
+  }
+}

package/components/02-molecules/link-list-card/link-list-card.stories.data.js

@@ -0,0 +1,13 @@
+export default {
+  args: (theme = 'light') => ({
+    theme,
+    variant: 'default',
+    title: 'Apply for a grant',
+    url: 'https://example.com/apply',
+    is_external: false,
+    is_new_window: false,
+    is_deactivated: false,
+    modifier_class: '',
+    attributes: null,
+  }),
+};

package/components/02-molecules/link-list-card/link-list-card.stories.js

@@ -0,0 +1,96 @@
+/**
+ * CivicTheme Link List Card component stories.
+ */
+
+// phpcs:ignoreFile
+import Component from './link-list-card.twig';
+import LinkListCardData from './link-list-card.stories.data';
+
+const meta = {
+  title: 'Molecules/List/Link List Card',
+  component: Component,
+  tags: ['digitalgovau'],
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    variant: {
+      control: { type: 'radio' },
+      options: ['default', 'authenticated'],
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    url: {
+      control: { type: 'text' },
+    },
+    is_external: {
+      control: { type: 'boolean' },
+    },
+    is_new_window: {
+      control: { type: 'boolean' },
+    },
+    is_deactivated: {
+      control: { type: 'boolean' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const LinkListCard = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: LinkListCardData.args(),
+};
+
+export const External = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    ...LinkListCardData.args(),
+    title: 'Visit the national portal',
+    url: 'https://national.example.gov',
+    is_external: true,
+    is_new_window: true,
+  },
+};
+
+export const AuthenticatedResource = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    ...LinkListCardData.args(),
+    variant: 'authenticated',
+    title: 'Annual report 2025 (secure)',
+    url: 'https://example.com/secure/annual-report',
+  },
+};
+
+export const AuthenticatedResourceDeactivated = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    ...LinkListCardData.args(),
+    variant: 'authenticated',
+    title: 'Annual report 2025 (sign in to access)',
+    url: '',
+    is_deactivated: true,
+  },
+};
+
+export const Dark = {
+  parameters: {
+    layout: 'padded',
+    backgrounds: { default: 'Dark' },
+  },
+  args: LinkListCardData.args('dark'),
+};