summaryrefslogtreecommitdiffstats
path: root/src/components/molecules/layout/page-footer.stories.tsx
blob: 31b7a49fa60cfdfb10f1dd8dc7c76b3a8a8489e9 (plain)
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { MetaData } from './meta';
import PageFooterComponent from './page-footer';

/**
 * Page Footer - Storybook Meta
 */
export default {
  title: 'Molecules/Layout',
  component: PageFooterComponent,
  argTypes: {
    className: {
      control: {
        type: 'text',
      },
      description: 'Set additional classnames to the footer element.',
      table: {
        category: 'Styles',
      },
      type: {
        name: 'string',
        required: false,
      },
    },
    meta: {
      description: 'The page meta.',
      table: {
        category: 'Options',
      },
      type: {
        name: 'object',
        required: false,
        value: {},
      },
    },
  },
} as ComponentMeta<typeof PageFooterComponent>;

const Template: ComponentStory<typeof PageFooterComponent> = (args) => (
  <PageFooterComponent {...args} />
);

const meta: MetaData = {
  custom: {
    label: 'More posts about:',
    value: [
      <a key="topic-1" href="#">
        Topic name
      </a>,
    ],
  },
};

/**
 * Page Footer Stories - With meta
 */
export const PageFooter = Template.bind({});
PageFooter.args = {
  meta,
};
tring.Escape */ .highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */ .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */ .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */ .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #336699 } /* Name.Variable.Class */ .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ .highlight .vm { color: #336699 } /* Name.Variable.Magic */ .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
// https://unicode-org.github.io/icu/userguide/format_parse/messages/
// https://unicode-org.github.io/icu-docs/apidoc/released/icu4j/com/ibm/icu/text/MessageFormat.html

(function (Prism) {
  /**
   * @param {string} source
   * @param {number} level
   * @returns {string}
   */
  function nested(source, level) {
    if (level <= 0) {
      return /[]/.source;
    } else {
      return source.replace(/<SELF>/g, function () {
        return nested(source, level - 1);
      });
    }
  }

  var stringPattern = /'[{}:=,](?:[^']|'')*'(?!')/;

  var escape = {
    pattern: /''/,
    greedy: true,
    alias: 'operator',
  };
  var string = {
    pattern: stringPattern,
    greedy: true,
    inside: {
      escape: escape,
    },
  };

  var argumentSource = nested(
    /\{(?:[^{}']|'(?![{},'])|''|<STR>|<SELF>)*\}/.source.replace(
      /<STR>/g,
      function () {
        return stringPattern.source;
      }
    ),
    8
  );

  var nestedMessage = {
    pattern: RegExp(argumentSource),
    inside: {
      message: {
        pattern: /^(\{)[\s\S]+(?=\}$)/,
        lookbehind: true,
        inside: null, // see below
      },
      'message-delimiter': {
        pattern: /./,
        alias: 'punctuation',
      },
    },
  };

  Prism.languages['icu-message-format'] = {
    argument: {
      pattern: RegExp(argumentSource),
      greedy: true,
      inside: {
        content: {
          pattern: /^(\{)[\s\S]+(?=\}$)/,
          lookbehind: true,
          inside: {
            'argument-name': {
              pattern: /^(\s*)[^{}:=,\s]+/,
              lookbehind: true,
            },
            'choice-style': {
              // https://unicode-org.github.io/icu-docs/apidoc/released/icu4c/classicu_1_1ChoiceFormat.html#details
              pattern: /^(\s*,\s*choice\s*,\s*)\S(?:[\s\S]*\S)?/,
              lookbehind: true,
              inside: {
                punctuation: /\|/,
                range: {
                  pattern: /^(\s*)[+-]?(?:\d+(?:\.\d*)?|\u221e)\s*[<#\u2264]/,
                  lookbehind: true,
                  inside: {
                    operator: /[<#\u2264]/,
                    number: /\S+/,
                  },
                },
                rest: null, // see below
              },
            },
            'plural-style': {
              // https://unicode-org.github.io/icu-docs/apidoc/released/icu4j/com/ibm/icu/text/PluralFormat.html#:~:text=Patterns%20and%20Their%20Interpretation
              pattern:
                /^(\s*,\s*(?:plural|selectordinal)\s*,\s*)\S(?:[\s\S]*\S)?/,
              lookbehind: true,
              inside: {
                offset: /^offset:\s*\d+/,
                'nested-message': nestedMessage,
                selector: {
                  pattern: /=\d+|[^{}:=,\s]+/,
                  inside: {
                    keyword: /^(?:few|many|one|other|two|zero)$/,
                  },
                },
              },
            },
            'select-style': {
              // https://unicode-org.github.io/icu-docs/apidoc/released/icu4j/com/ibm/icu/text/SelectFormat.html#:~:text=Patterns%20and%20Their%20Interpretation
              pattern: /^(\s*,\s*select\s*,\s*)\S(?:[\s\S]*\S)?/,
              lookbehind: true,
              inside: {
                'nested-message': nestedMessage,
                selector: {
                  pattern: /[^{}:=,\s]+/,
                  inside: {
                    keyword: /^other$/,
                  },
                },
              },
            },
            keyword: /\b(?:choice|plural|select|selectordinal)\b/,
            'arg-type': {
              pattern: /\b(?:date|duration|number|ordinal|spellout|time)\b/,
              alias: 'keyword',
            },
            'arg-skeleton': {
              pattern: /(,\s*)::[^{}:=,\s]+/,
              lookbehind: true,
            },
            'arg-style': {
              pattern:
                /(,\s*)(?:currency|full|integer|long|medium|percent|short)(?=\s*$)/,
              lookbehind: true,
            },
            'arg-style-text': {
              pattern: RegExp(
                /(^\s*,\s*(?=\S))/.source +
                  nested(/(?:[^{}']|'[^']*'|\{(?:<SELF>)?\})+/.source, 8) +
                  '$'
              ),
              lookbehind: true,
              alias: 'string',
            },
            punctuation: /,/,
          },
        },
        'argument-delimiter': {
          pattern: /./,
          alias: 'operator',
        },
      },
    },
    escape: escape,
    string: string,
  };

  nestedMessage.inside.message.inside = Prism.languages['icu-message-format'];
  Prism.languages['icu-message-format'].argument.inside.content.inside[
    'choice-style'
  ].inside.rest = Prism.languages['icu-message-format'];
})(Prism);