All files / packages/design-system-2/.storybook/decorators rtl-noflip-notice.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { html } from 'lit-html';
import type { Decorator } from '@storybook/web-components-vite';
 
/**
 * Prepends a short RTL note above the story when the story is tagged
 * `rtl-noflip`. Signals that the component keeps SLDS 1's @noflip
 * physical-property behavior in RTL. Opt-out per story with `!rtl-noflip`.
 */
export const rtlNoflipNoticeDecorator: Decorator = (story, context) => {
  if (!context.tags?.includes('rtl-noflip')) return story();
  return html`
    <p
      class="slds-rtl-noflip-notice"
      style="
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0 0 0.75rem;
        padding: 0.125rem 0 0.125rem 0.625rem;
        border-inline-start: 2px solid #7f8ced;
        color: #6b6b78;
        font-size: 0.8125rem;
        line-height: 1.4;
      "
    >
      <span aria-hidden="true" style="opacity: 0.7;">🔄</span>
      <span>
        <strong style="font-weight: 600; color: #4a4a55;">RTL Notice:</strong>
        some elements of this component use physical properties to match SLDS 1 behavior.
      </span>
    </p>
    ${story()}
  `;
};